So zeichnen Sie Grafiken mit js auf Leinwand

Verwenden Sie auf der Leinwand zunächst die HTML-DOM-Methode von JavaScript, um das -Element zu finden, verwenden Sie dann die Methode getContext(), um ein Zeichenobjekt zu erstellen, und verwenden Sie schließlich die Eigenschaften und Methoden des HTML-DOM-Canvas-Objekts zum Zeichnen Grafik. Die vom

HTML5-Element erstellte Leinwand dient nur zum Übertragen von Grafiken und ist ein Container. Wir müssen auch Skripte (normalerweise JavaScript) verwenden, um Grafiken tatsächlich dynamisch zu zeichnen . Wie zeichnet man also mit JavaScript Grafiken auf Leinwand? Dieser Artikel gibt Ihnen eine detaillierte Einführung und hoffe, dass er Ihnen hilfreich sein wird.

Leinwand erstellen

Bevor wir das Zeichnen von Grafiken vorstellen, müssen wir zunächst eine Leinwand mit dem Element erstellen >

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;">
当前的浏览器不支持HTML5 canvas标记。
</canvas>

Verwenden Sie JavaScript, um Grafiken auf der Leinwand zu zeichnen

1. Finden Sie das Leinwandelement

var canvas = document.getElementById("myCanvas");// 找到画布元素

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

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext(&quot;2d&quot;);
ctx.beginPath(); // 意思是开始绘制
ctx.moveTo(0,0);  
ctx.lineTo(300,200);  
ctx.stroke(); 
</script>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext(&quot;2d&quot;);
ctx.beginPath();  
ctx.arc(95,50,40,0,2*Math.PI);  
ctx.stroke(); 
</script>