Heim > Artikel > Web-Frontend > Die Verwendung von Canvas beim HTML5-Zeichnen von Linien und Flächen

Die Verwendung von Canvas beim HTML5-Zeichnen von Linien und Flächen

零下一度Original: 2017-05-06 11:51:361989Durchsuche

Wir wissen, dass Leinwand eine Leinwand ist. Heute werden wir Linien und Flächen auf die Leinwand zeichnen.

1. Die Leinwand in HTML

<!doctype html>
<html lang="en">
 <head>
  <title>Canvas 2D画线和面</title>
 </head>
 <body>
  <canvas id="cv" width="150" height="150"></canvas>
 </body>
</html>

canvas ist ein Element in HTML5 Wenn die Breite und Höhe nicht festgelegt sind, wird die Leinwand auf die Breite initialisiert 300 Pixel und die Höhe beträgt 150 Pixel. Die Größe des Elements kann mithilfe von CSS angepasst werden. Wenn das Bild beim Zeichnen so gedehnt wird, dass es seinen Rahmen-Abmessungen entspricht, stimmen die CSS-Abmessungen nicht mit den Proportionen der ursprünglichen Leinwand überein und es kommt zu Verzerrungen.

2. Rendering-Kontext

Die Leinwand ist zunächst leer. Zur Veranschaulichung muss das Skript zunächst den Rendering-Kontext finden und dann darauf zurückgreifen. Das 5ba626b379994d53f7acf72a64f9b697-Element verfügt über eine Methode namens getContext(), die zum Abrufen des Rendering-Kontexts und seiner Zeichenfunktion verwendet wird. getContext() hat nur einen Parameter, das Format des Kontexts. Für 2D-Bilder können Sie CanvasRenderingContext2D verwenden.

var canvas = document.getElementById(&#39;cv&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);

兼容性检查在不支持 <canvas> 标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById(&#39;tutorial&#39;);
if (canvas.getContext){
  var ctx = canvas.getContext(&#39;2d&#39;);
  // drawing code here
} else {
  // canvas-unsupported code here
}

3. Zeichnen Sie ein Quadrat

, um den Kontext zu erhalten, genau wie beim Abrufen des Pinsels Canvas:

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);

CanvasRenderingContext2D.fillRect() ist die Methode der Canvas 2D API zum Zeichnen eines gefüllten Rechtecks. Der Startpunkt des Rechtecks liegt an der (x, y)-Position. Die Abmessungen des Rechtecks sind Breite und Höhe. Das fillStyle -Attribut bestimmt den Stil des Rechtecks.

4. Zeichnen Sie eine Linie

In ähnlicher Weise ist das Zeichnen einer Linie auch eine Methode zum Aufrufen von ctx:

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100, 100);
ctx.stroke();

CanvasRenderingContext2D.Stroke() ist die Canvas 2D-API, die verwendet wird Nicht-Null-Wrap-Around-Regeln, eine Methode zum Zeichnen des aktuellen oder vorhandenen Pfads entsprechend dem aktuellen Strichzeichnungsstil.
Im obigen Code zeichnen wir zuerst einen Pfad und rendern den Pfad dann mithilfe der Strichmethode im aktuellen Stil.

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDie Verwendung von Canvas beim HTML5-Zeichnen von Linien und Flächen. 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：Teilen Sie einen Beispielcode, der HTML5 verwendet, um den freien Fall von Kanonenkugeln zu realisierenNächster Artikel：Teilen Sie einen Beispielcode, der HTML5 verwendet, um den freien Fall von Kanonenkugeln zu realisieren

In Verbindung stehende Artikel

Mehr sehen