Heim > Artikel > Web-Frontend > Canvas-Lernreihe 1: Erste Einführung in Canvas

Canvas-Lernreihe 1: Erste Einführung in Canvas

巴扎黑Original: 2017-06-23 14:50:411622Durchsuche

Sie haben vor kurzem begonnen, Canvas zu lernen, und ich habe vor, einige Notizen und Zusammenfassungen des gesamten Lernprozesses von Canvas aufzuzeichnen. Wenn es Mängel gibt, weisen Sie diese bitte darauf hin.

1. Einführung in Canvas

Die Entstehung des Canvas-Elements kann gesagt werden Um die Zeichenanimation der Web-Welt und die Tür zu Grafiken zu öffnen, ist ihre Funktion sehr leistungsfähig
Das Canvas-Element ist das leistungsstärkste Element in HTML5, und seine Fähigkeiten werden hauptsächlich durch den Kontext (Zeichnungskontext/ Zeichenumgebung) in Canvas, die vom Objekt angezeigt wird. Dieses Objekt wird von der Leinwand selbst erhalten.

var canvas = getElementById('canvas');var context = canvas.getContext('2d');

2. Sicherungsinhalt der Leinwand

Text, der zwischen Canvas-Elementen enthalten ist. Dieser Text wird als „Backup-Inhalt“ bezeichnet und wird nur angezeigt, wenn der Browser das Canvas-Element nicht unterstützt

<canvas>当前浏览器不支持canvas元素，请更换浏览器</canvas>

3. Leinwandgröße

Die Standardbreite des Leinwandelements beträgt 300 Pixel und die Höhe beträgt 150 Pixel.

Wir können die Größe der Leinwand über die Breiten- und Höhenattribute der Leinwand ändern. Wir können die Größe des Leinwandelements auch über CSS ändern. Es gibt jedoch einen Unterschied zwischen den beiden Modifikationen.

Leinwand hat tatsächlich zwei Größensätze:

Eine ist die Größe des Leinwandelements und die andere ist die Größe der Leinwand Zeichenfläche.

Wenn wir die Canvas-Attribute Breite und Höhe verwenden, ändern wir tatsächlich gleichzeitig die Größe des Elements und die Größe der Zeichenfläche

Beim Festlegen mit CSS wird die Größe des Canvas-Elements geändert, was keinen Einfluss auf die Größe der Zeichenfläche hat. Zu diesem Zeitpunkt skaliert der Browser die Zeichenfläche, was zu Effekten führt, die wir nicht haben Ich möchte

Die Leistung der Breiten- und Höhenattribute beim Ändern der Leinwandgröße erhalten

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);</script>

Leistung bei Verwendung von CSS zum Ändern der Größe von Canvas-Elementen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>#canvas {
            margin: 0 auto;
            padding: 0;
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
        }</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);</script>
</body>
</html>

Wenn wir also die Größe des Canvas-Elements festlegen, ist es am besten, kein CSS zum Festlegen zu verwenden. Wir können es so einstellen

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>

oder

<script type="text/javascript">var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';</script>

4. canvas API

canvas元素并未提供很多API，它只提供了两个属性三个方法，而绘图功能的方法与属性全都是canvas的绘图环境（context）对象提供。

width：设置/获取canvas元素绘图表面的宽度，默认值为300。
height：设置/获取canvas元素绘图表面的高度，默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
toBold(): 描述：创建Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由User Agent( 用户代理端 )自行决定。

toDataURL():

　 type 可选参数

　　图片格式，默认为 image/png

　　encoderOptions 可选参数

　　当图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

　　如果超出取值范围，将会使用默认值 0.92，默认分辨率为96dpi。

　　这里值得注意：

如果canvas的高度或者宽度为0时，会返回字符串 "data:,"
如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头，说明传入的类型不支持
Chrome支持“image/webp”类型

　　尽管在默认情况下canvas对象是一副位图，但是并不是HTML中的img元素，所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>#canvas {
            margin: 0 auto;
            padding: 0;
            display: none;
        }</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage');
    canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL();
    dataImage.src = dataUrl;</script>
</body>
</html>

toBold():

目前该方法只有Firefox与IE10浏览器支持

参考文章：

MDN Web 技术文档

Das obige ist der detaillierte Inhalt vonCanvas-Lernreihe 1: Erste Einführung in Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Flexible-Box-Modell: Erkennung und Verwendung von Flex-BoxenNächster Artikel：Flexible-Box-Modell: Erkennung und Verwendung von Flex-Boxen

In Verbindung stehende Artikel

Mehr sehen