ホームページ > 記事 > ウェブフロントエンド > html5キャンバスを使った直線の引き方を図解で詳しく解説
html5キャンバスを使った直線の引き方を図解で詳しく解説
- yuliaオリジナル
- 2018-10-24 17:14:136616ブラウズ
まずはcanvasで直線を描くために必要なプロパティを紹介します
moveTo(x,y)で直線の開始位置の座標を設定できます
lineTo(x,y) で線を設定できます。 終了位置の座標を設定できます。
lineWidth で線の幅を設定できます。
drawingStyle で線の色を設定できます。
キャンバスを使用して、直線、詳しい手順：
1.
2. var c=document.getElementById("myCanvas") を使用してキャンバス要素を取得します。
3. var ctx=c.getContext("2d") を使用してコンテキスト オブジェクトを作成します。
4. 直線の始点と終点、開始位置moveTo(25,25)、終了位置lineTo(175,175)
5を設定します。 .lineWidth = 5 で線の幅を設定し、ctx.drawingStyle = "red" で線の色を設定します。
6 最後に、ctx.drawing() を使用して直線を描画します。 completed
具体的なコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #000000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(25,25);
ctx.lineTo(175,175);
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
</html>レンダリング:
上記は、canvas で直線を描く方法を紹介しています。 . Canvas の最も単純な部分ですので、このような効果を実際に作成できるかどうかを確認してください。
【関連チュートリアルの推奨事項】
1. HTML5 ビデオ チュートリアル
2. JavaScript ビデオ チュートリアル
3.ブートストラップ チュートリアル
以上がhtml5キャンバスを使った直線の引き方を図解で詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。