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

零下一度

Freigeben： 2017-05-06 11:51:36

Original

2039 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

兼容性检查在不支持 <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
}

Nach dem Login kopieren

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);

Nach dem Login kopieren

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();

Nach dem Login kopieren

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!