English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Grund教程

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Canvas

Der <canvas> ist ein HTML5 Ein neuer HTML-Element, in dem Sie mit Skripten (normalerweise JavaScript) Bilder zeichnen können. Es kann verwendet werden, um Bildergalerien zu erstellen oder einfache (aber auch nicht so einfache) Animationen zu erstellen, sogar Echtzeit-Videobearbeitung und -Rendern.

Der <canvas>-Tag definiert Grafiken, wie z.B. Diagramme und andere Bilder, um Grafiken zu zeichnen, müssen Sie Skripte verwenden.

Auf dem Canvas (Brett) einen roten Rechteck, einen Gradientenrechteck, ein farbiges Rechteck und einige farbige Texte zeichnen.

你的浏览器不支持 HTML5 的 <canvas> 元素.

Was ist Canvas?

HTML5 Das <canvas>-Element wird für die Zeichnung von Grafiken verwendet, die durch Skripte (normalerweise JavaScript) durchgeführt werden.

Das <canvas>-Tag ist nur ein Bildbehälter, Sie müssen Skripte verwenden, um Grafiken zu zeichnen.

Sie können canvas auf verschiedene Weisen verwenden, um Pfade, Kästen, Kreise, Texte und Bilder zu zeichnen.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die das <canvas>-Element unterstützt.

Element




<canvas>4.09.02.03.19.0

Erstellen Sie ein Canvas (Canvas)

Ein Canvas in einer Webseite ist ein rechteckiger Rahmen, der durch das <canvas>-Element gezeichnet wird.

Beachtung: Standardmäßig hat das <canvas>-Element keine Rahmen und Inhalt.

<canvas> einfaches Beispiel:

<canvas id="myCanvas" width="200" height="100"></canvas>

Beachtung: Das Tag muss normalerweise eine id-Attribute haben (oft in Skripten referenziert), Die width- und height-Attribute definieren die Größe des Canvas.

Hinweis:Sie können mehrere <canvas>-Elemente in einer HTML-Seite verwenden.

Verwenden Sie das style-Attribut, um einen Rahmen hinzuzufügen:

<!DOCTYPE　html><html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Web(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px fest #000000;">
</canvas>
</body>
</html>
Testen Sie heraus, ob ‹/›

Verwenden Sie JavaScript, um Bilder zu zeichnen

Das canvas-Element hat selbst keine Zeichnungsfähigkeit. Alle Zeichnungsarbeiten müssen im JavaScript intern abgeschlossen werden:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px fest #c3c3c3>
您的浏览器不支持 HTML5　canvas-Tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

Beispielanalyse:

Zuerst, finden Sie das <canvas>-Element:

var c=document.getElementById("myCanvas");

Dann, erstellen Sie den Context-Objekt:

var ctx=c.getContext("2d");

getContext("2d) Objekt ist ein eingebautes HTML5 Das Objekt, das verschiedene Zeichnungspfade, Rechtecke, Kreise, Texte und das Hinzufügen von Bildern unterstützt.

Die folgenden zwei Zeilen Code zeichnen einen roten Rechteck:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Die Einstellung von fillStyle kann CSS-Farbe, Farbverlauf oder Muster sein. fillStyle Die Standardwerte sind #000000 (schwarz).

fillRect(x,y,breite,höhe) Methode definiert die aktuelle Füllweise des Rechtecks.

Canvas-Koordinaten

Canvas ist ein zweidimensionales Raster.

Die oberen linken Ecken des Canvas sind (0,0)

Die obige fillRect-Methode hat Parameter (0,0,150,75)

Das bedeutet: Zeichnen Sie auf dem Canvas 150x75 des Rechtecks, beginnend mit der linken oberen Ecke (0,0).

Beispiel für Koordinaten

Wie im Bild gezeigt, werden die X- und Y-Koordinaten des Canvas verwendet, um das Zeichnen im Canvas zu positionieren. Der Mauszeiger über dem Rechteck zeigt die Positions-Koordinaten an.

X
Y

Canvas - Pfad

Um Linien auf dem Canvas zu zeichnen, verwenden wir die folgenden beiden Methoden:

  • moveTo(x,y) definieren Sie den Anfangspunkt der Linie

  • lineTo(x,y) definieren Sie den Endpunkt der Linie

Um Linien zu zeichnen, müssen wir die "Ink"-Methode verwenden, wie stroke().

示例

Definieren Sie den Anfangs-Punkt (0,0), und den Endpunkt (200,100)。Dann verwenden Sie die stroke() Methode, um die Linie zu zeichnen:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

Um Kreise in Canvas zu zeichnen, verwenden wir die folgenden Methoden:

arc(x,y,r,start,stop)

Tatsächlich verwenden wir bei der Zeichnung von Kreisen den "Ink"-Ansatz, z.B. stroke() oder fill().

示例

Verwenden Sie die arc() Methode, um einen Kreis zu zeichnen:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>
Testen Sie heraus, ob ‹/›

Canvas - Text

Verwenden Sie die Canvas-Schrift, die wichtigen Attribute und Methoden sind wie folgt:

  • font - Definieren Sie die Schriftart

  • fillText(text,x,y) - Text auf dem Canvas zeichnen, den dichten Text

  • strokeText(text,x,y) - Text auf dem Canvas zeichnen, der leeren Text

Verwenden Sie fillText():

示例

Verwenden Sie die Schriftart "Arial", um auf dem Canvas einen hohen 30px Text (dicht):

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

Verwenden Sie strokeText():

示例

Verwenden Sie die Schriftart "Arial", um auf dem Canvas einen hohen 30px Text (hohl):

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

Canvas - 　Farbverlauf

Farbverläufe können in Rechtecken, Kreisen, Linien, Texten usw. gefüllt werden, verschiedene Formen können unterschiedliche Farben selbst definieren.

Es gibt zwei verschiedene Arten, um die Farbverläufe von Canvas zu setzen:

  • createLinearGradient(x,y,x1,y1) - Erstellen Sie eine Linienfarbverlauf

  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/Kreisförmiger Farbverlauf

Wenn wir auf den Farbverlaufsobjekt zugreifen, müssen wir zwei oder mehr als zwei Stopfarben verwenden.

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

示例

创建一个线性渐变。使用渐变填充矩形:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//　Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

使用 createRadialGradient():

示例

创建一个径向/圆形渐变。使用渐变填充矩形：

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//　Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

使用图像:

示例

把一幅图像放置到画布上:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function() {
　　　　ctx.drawImage(img,10,10);
}　
</script>
</body>
</html>
Testen Sie heraus, ob ‹/›

HTML Canvas Referenzhandbuch

Die vollständigen Attribute des Tags können Sie imCanvas Referenzhandbuch.

HTML <canvas> Tag

TagBeschreibung
<canvas>HTML5 Verwenden Sie JavaScript im canvas-Element, um Bilder auf der Webseite zu zeichnen.
HTML5 Inline SVGHTML5 Neue Elemente