jsを使用してキャンバスにグラフィックを描画する方法

キャンバス上で、まず JavaScript の HTML DOM メソッドを使用して 要素を見つけ、次に getContext() メソッドを使用して描画オブジェクトを作成し、最後に HTML DOM Canvas オブジェクトのプロパティとメソッドを使用して描画します。グラフィックス。

HTML5 要素によって作成されたキャンバスは、グラフィックを運ぶためにのみ使用され、実際にグラフィックを動的に描画するためにはスクリプト (通常は JavaScript) も使用する必要があります。 。では、JavaScript を使用してキャンバスにグラフィックを描画するにはどうすればよいでしょうか?この記事では詳しく紹介しますので、お役に立てれば幸いです。

キャンバスの作成

グラフィックの描画方法を紹介する前に、まず 要素を使用してキャンバスを作成する必要があります。

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

JavaScript を使用してキャンバスにグラフィックを描画します以下キャンバスにグラフィックを描画する方法を紹介します。

グラフィックを描画するときは、まず必要な場所のキャンバスを見つける必要があります。グラフィックス、つまり を描画します。では、canvas 要素を見つけるにはどうすればよいでしょうか?

実際、これは HTML DOM メソッド getElementById() を使用することで非常に簡単に実行できます。例:

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

以前にキャンバスを作成したときに、次の値を追加しました。 id="myCanvas" をキャンバスに追加すると、この ID 値を使用して 要素を検索できるようになります。

getContext() メソッドは、現在、キャンバス上に描画するための環境を返すことができます。 「2d」は 2 次元描画環境を指定します。これは将来 3D 描画をサポートするように拡張される可能性があります。例:

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

ctx オブジェクトを使用すると、HTML5 キャンバスにグラフィックを描画できます。

この時点で、JavaScript でサポートされている HTML DOM Canvas オブジェクトのプロパティとメソッドを使用してグラフィックを描画できます。いくつかの簡単な例を通して、グラフィックを描画する方法を見てみましょう:

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

beginPath() メソッド: 開始パスを定義するか、現在のパスをリセットして描画の開始を示します。

moveTo(x,y) メソッド: 直線の開始点を定義するために使用されます。

lineTo(x,y) メソッド: 直線の終了位置を定義するために使用されます。

ストローク() メソッド: 定義されたパスを実際に描画します。

レンダリング:

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

レンダリング:

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がjsを使用してキャンバスにグラフィックを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。