HTML5 Canvasの基本的な線画例tutorial_html5チュートリアルのスキル

線を引くにはどうすればよいですか?実際のペイントとほぼ同じです:
1. ペイントの先頭にブラシを移動します
2. 最初のストロークの停止点を決定します
3. 計画を立てた後、ブラシを選択します (ブラシを含む)厚みや色など）
4.図面の確認

Canvas は状態描画に基づいているため (非常に重要です。後で説明します)、最初のいくつかのステップで状態を決定し、最後のステップで特定の描画を行います。
1. ブラシを移動します (moveTo())
前にブラシ コンテキストを取得したので、これを例として、変更されたメソッド context.moveTo(100,100) の使用例を示します。このコードの意味は、ブラシを点(100,100)(単位はpx)に移動することです。キャンバスの左上隅がデカルト座標系の原点であり、y 軸の正の方向は下方向、x 軸の正の方向は右であることに注意してください。
2. ストローク停止点(lineTo())
同様にcontext.lineTo(600,600)。この文は、前のストロークの停止点から (600,600) まで描くことを意味します。ただし、ここでの moveTo() と lineTo() は単なるステータスであり、計画中であり、描画の準備をしています。まだ描画を開始していません。これは単なる計画です。
3. ブラシを選択します
ここではブラシの色と太さのみを設定します。
context.lineWidth = 5、この文はブラシ(線)の太さを10pxに設定することを意味します。
context.ストロークスタイル = "#AA394C"、この文はブラシ(線)の色をローズレッドに設定することを意味します。
キャンバスは状態ベースの描画であるため、ブラシの太さと色を選択すると、実際には線の太さと色も選択されます。
4. 描画を確認する
描画を確認する方法は、fill() と stop() の 2 つだけです。描画の基礎知識がある人は、前者が塗りつぶし、後者がストロークを指すことを知っているはずです。線を描くだけなので、ただ撫でるだけです。コード context.ストローク() を呼び出すだけです。

線を描いてください
ただの線分じゃないですか！ナンセンスすぎる！それから絵を描き始めましょう。

JavaScript コードコンテンツをクリップボードにコピーします

2. "zh">
4. "UTF-8">
頭>
"キャンバスワープ"> "キャンバス" style="ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
キャンバス>
window.onload =
10. function(){
11. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
Canvas.height = 600;
var
13. context = Canvas.getContext(
"2d"
14. ); context.moveTo(100,100);
context.lineTo(600,600);
context.lineWidth = 5;
16. context.ストロークスタイル =
"#AA394C"
17. ;
context.ストローク();
}