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 =
11. function(){
12. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
Canvas.height = 600;
var
14. context = Canvas.getContext(
"2d"
15. ); context.moveTo(100,100);
context.lineTo(600,600);
context.lineWidth = 5;
17. context.ストロークスタイル =
"#AA394C"
18. ;
context.ストローク();
}

24. 実行結果:
    

    (友達はいつも私に、ページの右下隅にあるクマは何ですか?と尋ねてきました。ああ、前に説明するのを忘れていました。これは偽造防止の透かしです!)
    ページ分析図にもマークを付けましたご参考までに。
    

    ここでは、元の タグから幅と高さを削除しましたが、JavaScript コードで Canvas オブジェクトの幅と高さの属性を設定しました。

    概要: キャンバスのサイズを設定するには、2 つの方法しかありません

    1.

    タグに設定します。

    2. JS コードでキャンバスのプロパティを設定します。

    とても素敵だと思いませんか？次に、速度を上げて複数の線で構成されるグラフィックを描画する必要があります。アーティストにまた一歩近づいたような気がしますか？単なる線分にすぎませんが、この絵は私たちにとっては小さな一歩ですが、人類にとっては大きな飛躍です。

    ポリラインの描画
    上に線分を描画することに成功しました。では、2 つのストロークまたは複数のストロークでポリラインを描画したい場合はどうすればよいでしょうか?
    賢い友人なら、これは単に lineTo() を再利用するだけでは考えられないでしょう。次に、美しいポリラインを描きました~
    

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

    2. "zh">
    4. "UTF-8">
    "キャンバスワープ"> "キャンバス" style="ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
    <スクリプト
    window.onload =
    11. function(){
    12. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
    Canvas.height = 600;
    var
    14. context = Canvas.getContext(
    "2d"
    15. ); context.moveTo(100,100);
    context.lineTo(300,300);
    context.lineTo(100,500);
    context.lineWidth = 5;
    18. context.ストロークスタイル =
    "#AA394C"
    19. ;
    context.ストローク();
    }
    24. 実行結果:
    複数のポリラインを描画する
    26. 同じ方法で、異なるスタイルで複数のポリラインを描画したい場合はどうすればよいでしょうか?たとえば、ここでは 3 つのポリライン、つまり赤、青、黒を描画します。賢い友人は、パンしてブラシの色を変更するだけで済むのは簡単ではないと思ったに違いありません。コードの形式は同じなので、コピーするだけです。コードは次のとおりです。
    JavaScript コード

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

    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.        
    6.   
    7.   
    8. "canvas-warp">   
    9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
    10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    11.        
      
26. <スクリプト>   
27. window.onload = 関数(){
28. var canvas = document.getElementById("canvas");   
29. canvas.width = 800;   
30. canvas.height = 600;   
31. var context = canvas.getContext("2d");   
33. context.moveTo(100,100);   
34. context.lineTo(300,300);   
35. context.lineTo(100,500);   
36. context.lineWidth = 5;   
37. context.ストロークスタイル = "赤";   
38. context.ストローク();   
40. context.moveTo(300,100);   
41. context.lineTo(500,300);   
42. context.lineTo(300,500);   
43. context.lineWidth = 5;   
44. context.ストロークスタイル = "青";   
45. context.ストローク();   
47. context.moveTo(500,100);   
48. context.lineTo(700,300);   
49. context.lineTo(500,500);   
50. context.lineWidth = 5;   
51. context.ストロークスタイル = "黒";   
52. context.ストローク();   
53. }
54.   
55.   
56.   

実行結果:

え？奇妙ではありませんか？最初に赤、次に青、次に黒はどうでしょうか?なんで全部真っ黒なの？実際、ここでの理由は私が以前から常に強調してきたことです - Canvas は状態ベースの描画です。
それはどういう意味ですか?実際、このコードはストローク()を使用するたびに、以前に設定された状態を再度描画します。最初のストローク()で赤いポリラインが描画され、2番目のストローク()で前の赤いポリラインが再描画されますが、この時点ではブラシが青いものに置き換えられているため、描画されるポリラインはすべて青になります。 。つまり、ストロークスタイルプロパティはオーバーライドされます。同様に3回目の描画ではペンの色が最終的な黒になるので、黒いポリラインが3本再描画されます。したがって、ここで見られる 3 つのポリラインは実際には 3 回描画され、合計 6 つのポリラインが描画されます。
それで、ポリラインを 3 本描きたいのですが、他に方法はありませんか?これでアーティストの魂は終わるのか？希望はないのでしょうか？いいえ、方法はあります。
beginPath() を使用して描画を開始します
描画メソッドが繰り返し描画するのを防ぐために、各描画の前に beginPath() を追加できます。これは、次の描画の開始点が beginPath( ）。 3 回描画する前に context.beginPath() を追加します。

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

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.        

  

<スクリプト>   

window.onload = 関数(){

var canvas = document.getElementById("canvas");   

canvas.width = 800;   

canvas.height = 600;   

var context = canvas.getContext("2d");   

context.beginPath();   

context.moveTo(100,100);   

context.lineTo(300,300);   

context.lineTo(100,500);   

context.lineWidth = 5;   

context.ストロークスタイル = "赤";   

context.ストローク();   

context.beginPath();   

context.moveTo(300,100);   

context.lineTo(500,300);   

context.lineTo(300,500);   

context.lineWidth = 5;   

context.ストロークスタイル = "青";   

context.ストローク();   

context.beginPath();   

context.moveTo(500,100);   

context.lineTo(700,300);   

context.lineTo(500,500);   

context.lineWidth = 5;   

context.ストロークスタイル = "黒";   

context.ストローク();   

}

  

  

  

ご覧のとおり、ここで私たちが意図した結果が得られました。beginPath() を使用しているため、ここでの作成手順は私が意図したように、3 回だけ作成され、毎回 1 本の折り線が作成されるだけです。
は、設定状態の開始点であり、その後にコード設定の設定状態の有効領域が設定メソッドの stop()、fill()、または closePath() に限定され、closePath() に到達します。暗号化の一貫性を保つために、作成を開始する前に必ず beginPath() を使用する必要があり、毎回の作成終了後に closePath() を使用します。