HTML Canvas を使用して線を描画するには、Canvas コンテキストの MoveTo() メソッドと LineTo() メソッドを使用する必要があります。具体的な内容を見てみましょう。
最初に例を見てみましょう
コードは次のとおりです
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); } </script> </head> <body onload="draw()" style="background-color:#D0D0D0;"> <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas> <div>Canvas Demo</div> </body> </html>
手順:
function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); }
分析
上記の JavaScript コードは描画コードです。 document.getElementById() メソッドを使用して Canvas コンテキストを取得し、Canvas オブジェクトの getContext() メソッドを呼び出してCanvasコンテキストで、コンテキストのbeginPath.()メソッドを呼び出してパスを開始し、moveTo()で指定した位置にペンを移動し、lineTo()メソッドで指定した位置に線を描画します。ストローク()メソッド。
実行結果
上記の HTML ファイルを実行すると、次の結果が表示されます。
次に、例を見てみましょう。
コードは次のとおりです
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); context.beginPath(); context.moveTo(120, 75); context.lineTo(260, 120); context.stroke(); context.beginPath(); context.moveTo(160, 100); context.lineTo(200, 140); context.lineWidth = "3"; context.stroke(); context.beginPath(); context.moveTo(200, 40); context.lineTo(360, 120); context.strokeStyle = '#00C080'; context.stroke(); context.beginPath(); context.moveTo(40, 20); context.lineTo(80, 160); context.strokeStyle = '#C00080'; context.lineWidth = "1"; context.stroke(); context.beginPath(); context.moveTo(400, 10); context.lineTo(380, 200); context.strokeStyle = "rgb(96, 96, 225)"; context.stroke(); } </script> </head> <body onload="draw()" style="background-color:#D0D0D0;"> <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas> <div>Canvas Demo</div> </body> </html>
手順:
上記のコードでは、線の太さと色を変更します。
線の太さを変更するには、Canvas の Context の lineWidth プロパティで線の太さを設定し、線の色を変更するには、Context のストロークスタイル プロパティで描画色を指定します。色の指定には、16 進形式、「RGB」形式、「青」、「赤」などの色名が使用できます。また、一度値を設定すると初期化されません。新しいパスは beginPath() を使用して作成されます。 設定する値。
例
context.beginPath(); context.moveTo(160, 100); context.lineTo(200, 140); context.lineWidth = "3"; context.stroke(); context.beginPath(); context.moveTo(200, 40); context.lineTo(360, 120); context.strokeStyle = '#00C080'; context.stroke();
上記のコードの場合、2行目ではlineWidthを指定していないため、先に指定したlineWidthの値を使用することができます。
操作結果
以上がHTML5キャンバスを使って線を引く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。