ホームページ > 記事 > ウェブフロントエンド > キャンバスで線を引く方法
キャンバスで線を引く方法
- php中世界最好的语言オリジナル
- 2018-03-14 09:45:172304ブラウズ
今回は、キャンバスを使って線を引く方法と、キャンバスを使って線を引くときの注意点を紹介します。 以下に実際の事例を示しますので、見てみましょう。
canvas は html5 の新しいタグです。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"/>
<title>Canvas绘图与动画基础</title></head><body><style>
#canvas{ border: 1px solid #aaa; text-align: center;
}</style><canvas id="canvas" width="1024" height="768">
当用户浏览器不支持Canvas,请更换浏览器重试！</canvas></body></html>canvasタグに対応していないブラウザの場合、通常はcanvasタグ内のフォントが表示されます。
それでは、線を描き始めましょう。
まず、キャンバスを取得します:
var canvas = document.getElementById("canvas"); キャンバスの幅と高さは通常、スタイルでは設定されません。上記の HTML に示すように、同じレベルのキャンバスと ID で設定することも、js を使用して設定することもできます。
canvas.width=1014; canvas.height=768;
描画のコンテキストを取得してください
var context = canvas.getContext("2d");
通常、キャンバスを操作するためにコンテキストを使用します。さあ、コードでそれについて詳しく学びましょう:
var context = canvas.getContext("2d");//得到绘图的上下文环境
context.beginPath();//开始绘制线条，若不使用beginPath，则不能绘制多条线条
context.moveTo(100, 100);//线条开始位置
context.lineTo(700, 700);//线条经过点
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();//结束绘制线条，不是必须的
context.lineWidth = 5;//设置线条宽度
context.strokeStyle = "red";//设置线条颜色
context.stroke();//用于绘制线条
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.closePath();
context.strokeStyle = "black";
context.stroke();上記のコードを実行して、赤色を閉じます。下の図に示すように、三角形と黒い実線が表示されます:
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他 に注目してください。関連記事！
推奨読書:
以上がキャンバスで線を引く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。