HTML5 Canvas API_html5 チュートリアルのヒントを使用して四角形を描画するための超戦略

closePath() を使用してシェイプを閉じます。
まず、最も一般的な方法を使用して四角形を描画します。

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

1.   
2. "en">   
3. <頭>   
4. "UTF-8">   
5.   
6.   
7.   
8.   
9. "zh">   
10. <頭>   
11. "UTF-8">   
12.   
13.   
14.   
15. "キャンバスワープ">   
16. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">   
17. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
18.   

  

<スクリプト>   

window.onload = 関数(){

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

canvas.width = 800;   

canvas.height = 600;   

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

context.beginPath();   

context.moveTo(150,50);   

context.lineTo(650,50);   

context.lineTo(650,550);   

context.lineTo(150,550);   

context.lineTo(150,50);     //绘制最後一笔使用图像闭合

context.lineWidth = 5;   

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

context.ストローク();   

}

  

  

  

  

  

実行結果:

一見すると何の問題もありませんが、視力の良い子供用の靴は、最後のストロークを閉じるときに問題があり、左上隅に隙間ができることに気づきました。この状況は、lineWidth の設定によって発生します。デフォルトの1ストロークであれば問題ありません。ただし、ストロークが大きくなり、線の幅が広くなるほど、このギャップはより顕著になります。では、この状況を回避するにはどうすればよいでしょうか?
タイトルですでにネタバレしてしまいましたが、clothPath() を使用してシェイプを閉じます。

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.beginPath(); context.moveTo(150,50);
16. context.lineTo(650,50);
17. context.lineTo(650,550);
18. context.lineTo(150,550);
19. context.lineTo(150,50);
//最後のストロークを描画する必要はありません
21. context.closePath();
//closePath() を使用してグラフィック
23. context.lineWidth = 5; context.ストロークスタイル = "黒"
;
24. context.ストローク();
26. }

31. 実行結果:
    

    この例では、前のレッスンの説明と組み合わせると、パスを描画するときに、計画したパスを beginPath() と closePath() でラップする必要があることがわかります。もちろん、最後のストロークを描画する必要はありません。closePath() を直接使用するだけで、自動的にストロークが閉じられます。 (つまり、閉じた形状を描画したくない場合は、closePath() を使用できません)
    

    四角形に色を付けます
    ここでは、ストローク()と同様に重要なメソッドfill()を紹介します。元のストロークと同様に、塗りつぶす前に、まず fillStyle 属性を使用して塗りつぶす色を選択する必要があります。
    たとえば、上の四角形を黄色にしたい場合は、次のように書くことができます。
    

    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.        

      
33. <スクリプト>   
34. window.onload = 関数(){
35. var canvas = document.getElementById("canvas");   
36. canvas.width = 800;   
37. canvas.height = 600;   
38. var context = canvas.getContext("2d");   
40. context.beginPath();   
41. context.moveTo(150,50);   
42. context.lineTo(650,50);   
43. context.lineTo(650,550);   
44. context.lineTo(150,550);   
45. context.lineTo(150,50);     //最後一笔可以不画
46. context.closePath();        //closePath() を使用する闭合図形式
48. context.fillStyle = "黄色";   //选择油漆桶の颜色
49. context.lineWidth = 5;   
50. context.ストロークスタイル = "黒";   
52. context.fill();                 //确定充填
53. context.ストローク();   
55. }
56.   
57.   
58.   
59.   
60.   

実行結果:

ここで注意する必要があるのは、適切なコーディングの実践です。なぜなら、前述したように、Canvas は状態ベースの描画であり、描画はストローク()とフィル()が呼び出されたときにのみ決定されるからです。したがって、これら 2 行のコードを最後に配置し、残りの状態設定コードをその前に配置して、描画を決定するコードから状態設定を分離します。コードの可読性を向上させます。

カプセル化された描画メソッド
長方形を描画するのに実際にはこのような 4 つのストロークが必要であることに気づいたはずです。この愚かな方法を使用して長方形を描画するたびに、これらのストロークを描画する必要があります。 10 個の長方形を費やさなければならない場合、どれだけの手間がかかるでしょうか。 100? 1,000?このように書くとコードが肥大化し、再利用性が非常に低くなってしまいます。ここでは、JavaScript を使用してこれらのメソッドをカプセル化できます。長方形は、左上隅の座標と長さと幅によって一意に決定できることがわかっています。
JavaScript 関数
ここでは JavaScript 関数を紹介します。基本的な知識がある場合は、このセクションをスキップして、次のセクションに直接進んでください。
JavaScript および ActionScript 言語の関数宣言呼び出しは、プログラミング言語の中で最も単純です。
関数の役割
関数の役割は、コードを一度記述し、そのコードを繰り返し再利用することです。たとえば、複数の合計セットの関数を完成させたいと考えています。

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

1. var 合計
2. 合計 = 3 2;
アラート(合計)
合計=7 8
5. ;
アラート(合計)
....
8. //コードを 2 行繰り返します

8 つのグループの数値の合計を実装する場合、16 行のコードが必要になります。実装するコードの行数も増えます。したがって、特定の機能を実行するコード ブロックを関数内に配置し、その関数を直接呼び出すことができるため、大量のコードを繰り返し入力する手間が省けます。

関数を使用して完了します:

JavaScript コード

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

1. 関数 add2(a,b){
合計 = a b;
2. アラート (合計)
3. }
// 書く必要があるのは 1 回だけです
5. add2(3,2)
;
6. add2(7,8)
;
7. ....
//関数を呼び出すだけです
関数を定義する

関数を定義するにはどうすればよいですか?以下の形式を見てください:

JavaScript コード

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

関数

1. 関数名 ( ) {
2. 関数本体
3. }
function は関数を定義するキーワード、「関数名」は関数に付ける名前、「関数本体」は特定の関数を完成させるコードに置き換えられます。

関数呼び出し

関数を定義した後、自動的に実行することはできません。関数を呼び出して、必要な位置に関数名を直接記述する必要があります。通常、次の 2 つの方法があります:

ケース 1: <script> タグ内で呼び出されます。 <br> <br> </p> <p>JavaScript コード</p> <div class="codeText">コンテンツをクリップボードにコピーします<div class="codeHead"><span class="lantxt"><div id="code_6911"> <ol class="dp-c"> <li class="alt"><span><span><スクリプト> </span></span></li> <li> <span></span><span class="keyword">関数</span><span> tcon() </span> </li> <li class="alt"><span>{ </span></li> <li> <span>alert(</span><span class="string">"関数呼び出しの学習おめでとうございます!"</span><span>); </span> </li>} <li class="alt"><span> </span></li>tcon(); <li> <span>//関数を呼び出し、関数名を直接記述します。 </span><span class="comment"> </span><span> </span> </li></script>