ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5キャンバスを使って線を引く方法
HTML5キャンバスを使って線を引く方法
- 不言オリジナル
- 2018-12-04 11:48:255592ブラウズ
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 サイトの他の関連記事を参照してください。