検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 Canvas API_html5 チュートリアルのヒントを使用して四角形を描画するための超戦略

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

WBOY
WBOYオリジナル
2016-05-16 15:45:351941ブラウズ

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.ストローク();   
  • }
  •   
  •   
  •   
  •   
  •   

    • 実行結果:
    2016321105129852.jpg (850×500)

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

    JavaScript コードコンテンツをクリップボードにコピーします
    2. "zh">
    4. "UTF-8">
      5. 四角形を描画します
      8. "キャンバスワープ"> "キャンバス" style="ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
      12. <スクリプト
      13. window.onload =
    13. function(){
    14. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
      15. Canvas.height = 600;
      16. var
    16. context = Canvas.getContext(
      17. "2d"
    17. ); context.beginPath(); context.moveTo(150,50);
    18. context.lineTo(650,50);
    19. context.lineTo(650,550);
    20. context.lineTo(150,550);
    21. context.lineTo(150,50);
      22. //最後のストロークを描画する必要はありません
    23. context.closePath();
      24. //closePath() を使用してグラフィック
    25. context.lineWidth = 5; context.ストロークスタイル = "黒"
      26. ;
    26. context.ストローク();
    28. }

    33. 実行結果:
      2016321105204703.jpg (850×500)

      この例では、前のレッスンの説明と組み合わせると、パスを描画するときに、計画したパスを 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.        
        
    35. <スクリプト>   
    36. window.onload = 関数(){
    37. var canvas = document.getElementById("canvas");   
    38. canvas.width = 800;   
    39. canvas.height = 600;   
    40. var context = canvas.getContext("2d");   
    42. context.beginPath();   
    43. context.moveTo(150,50);   
    44. context.lineTo(650,50);   
    45. context.lineTo(650,550);   
    46. context.lineTo(150,550);   
    47. context.lineTo(150,50);     //最後一笔可以不画
    48. context.closePath();        //closePath() を使用する闭合図形式
    50. context.fillStyle = "黄色";   //选择油漆桶の颜色
    51. context.lineWidth = 5;   
    52. context.ストロークスタイル = "黒";   
    54. context.fill();                 //确定充填
    55. context.ストローク();   
    57. }
    58.   
    59.   
    60.   
    61.   
    62.   

    実行結果:
    2016321105516457.jpg (850×500)

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


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

    JavaScript コードコンテンツをクリップボードにコピーします
    1. var 合計
    2. 合計 = 3 2;
      3. アラート(合計)
      5. 合計=7 8
    5. ;
      6. アラート(合計)
      8. ....
    8. //コードを 2 行繰り返します
    8 つのグループの数値の合計を実装する場合、16 行のコードが必要になります。実装するコードの行数も増えます。したがって、特定の機能を実行するコード ブロックを関数内に配置し、その関数を直接呼び出すことができるため、大量のコードを繰り返し入力する手間が省けます。
    関数を使用して完了します:



    JavaScript コード
    コンテンツをクリップボードにコピーします
    1. 関数 add2(a,b){
      2. 合計 = a b;
    2. アラート (合計)
    3. }
      4. // 書く必要があるのは 1 回だけです
    5. add2(3,2)
      6. ;
    6. add2(7,8)
      7. ;
    7. ....
      8. //関数を呼び出すだけです
      10. 関数を定義する
    関数を定義するにはどうすればよいですか?以下の形式を見てください:



    JavaScript コード

    コンテンツをクリップボードにコピーします
    関数
    1. 関数名 ( ) {
    2. 関数本体
    3. }
      5. 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>

    • 2 番目のケース: ボタンをクリックした後に定義された関数を呼び出すなど、HTML ファイル内で呼び出されます。

    この状況は後で使用します。

    パラメータを含む関数

    の形式は次のとおりです:


    JavaScript コード
    コンテンツをクリップボードにコピーします
    1. function 関数名(パラメータ1、パラメータ2)
      2. {
      3. ファンクションコード
      4. }
    注: 複数のパラメーターを使用できます。必要に応じてパラメーターの数を増減します。パラメータは (カンマ,) で区切られます。
    この形式に従って、任意の 2 つの数値の合計を実装する関数は次のように記述する必要があります:



    JavaScript コード
    コンテンツをクリップボードにコピーします
    1. 関数 add2(x,y)
      2. {
      3. 合計 = x y
      4. document.write(sum);
    4. }
      6. x と y は関数の 2 つのパラメーターです。関数を呼び出すとき、これら 2 つのパラメーターを通じて 2 つの実際の加数を関数に渡すことができます。
    たとえば、add2(3,4) は 3 4 の合計を求め、add2(60,20) は 60 と 20 の合計を求めます。
    戻り値関数




    JavaScript コード

    コンテンツをクリップボードにコピーします
    関数
    1. add2(x,y) {
    2. 合計 = x y
      4. return
    4. sum; //関数の値を返します。return 後の値を戻り値と呼びます。 }
      6. ここでの戻り値は他の言語と同じですが、JSやASなどの弱い型付け言語では関数宣言に戻り値の型を記述する必要はありません。
    この時点で、JavaScript 関数についても体系的に説明しました。トピックに戻りましょう~
    長方形をカプセル化することもできます。コードは次のとおりです:



    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");   
  • drawRect(context, 150, 50, 50, 50, "赤", 5, "青");   
  • drawRect(context, 250, 50, 50, 50, "緑", 5, "赤");   
  • drawRect(context, 350, 50, 50, 50, "黄", 5, "黒");   
  • }
  • function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
  • cxt.beginPath();   
  • cxt.moveTo(x, y);   
  • cxt.lineTo(x width, y);   
  • cxt.lineTo(x 幅, y 高さ);   
  • cxt.lineTo(x, y height);   
  • cxt.lineTo(x, y);   
  • cxt.closePath();   
  • cxt.lineWidth = borderWidth;   
  • cxt.ストロークスタイル = borderColor;   
  • cxt.fillStyle = fillColor;   
  • cxt.fill();   
  • cxt.ストローク();   
  • }
  •   
  •   
  •   
  •   
  •   

    • 运行結果：
    2016321105735875.jpg (850×500)

    は、rect() メソッドを使用して四角形を作成します。
     は、四角形を作成する一般的な方法です。そのため、Canvas API に、完璧な四角形を作成するメソッド —— rect() が組み込まれています。メソッド受信 4 つのパラメータ x、y、幅、高さ、实际调使用時つまり

    JavaScript コード复制コンテンツ到剪贴板
    1. context.rect(x,y,width,height);

    これを踏まえて、先ほどのカプセル化方法を最適化してみましょう。

    JavaScript コードコンテンツをクリップボードにコピーします
    1. functiondrawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
    2. cxt.beginPath();
    3. cxt.rect(x, y, 幅, 高さ);
    4. //cxt.closePath(); closePath() は必要ありません
    6. cxt.lineWidth = borderWidth
    7. cxt.ストロークスタイル = borderColor
    8. cxt.fillStyle = fillColor
    10. cxt.fill();
    11. cxt.ストローク();
    12. }

    カプセル化メソッドを呼び出して魔法のイメージを描画します
    魔法のイメージを作成します~
    2016321105759647.jpg (500×375)

    それでは、パッケージ化した方法で手術を行ったり、手を練習したり、筋肉や骨を動かしたりするために使用してみましょう。

    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.rect(0, 0, 800, 600);   
  • context.fillStyle = "#AA9033";   
  • context.fill();   
  • context.beginPath();   
  • for(var i=0; i<=20; i ){
  • drawWhiteRect(context, 200 10 * i, 100 10 * i, 400 - 20 * i, 400 - 20 * i);   
  • drawBlackRect(context, 205 10 * i, 105 10 * i, 390 - 20 * i, 390 - 20 * i);   
  • }
  • context.beginPath();   
  • context.rect(395, 295, 5, 5);   
  • context.fillStyle = "黒";   
  • context.lineWidth = 5;   
  • context.fill();   
  • context.ストローク();   
  • }
  • function drawBlackRect(cxt, x, y, width, height){
  • cxt.beginPath();   
  • cxt.rect(x, y, 幅, 高さ);   
  • cxt.lineWidth = 5;   
  • cxt.ストロークスタイル = "黒";   
  • cxt.ストローク();   
  • }
  • 関数drawWhiteRect(cxt, x, y, width, height){
  • cxt.beginPath();
  • cxt.rect(x, y, 幅, 高さ);
  • cxt.lineWidth = 5
    • ;
  • cxt.ストロークスタイル = "白";
    • cxt.ストローク();
    • }
    • 実行結果:


    2016321105841741.jpg (850×500)とても魔法のようだと思いませんか?すごくクールじゃないですか？このコードについては説明する時間はとりませんので、授業が終わってから考えてもいいですし、学んだ知識を使ってかっこいい画像を描いてみてもいいでしょう。実際、このレッスンには多くの内容が含まれています。紹介しているのは、closePath()、fillStyle、fill()、rect() の 4 つのプロパティとメソッド、および拡張 JavaScript 関数の説明だけです。

    キャンバスは画像の角丸効果を実現します

    このルールは、さまざまな Canvas で描画された通常または不規則なグラフィックに適用されます。
    キャンバスで角を丸くする鍵は、「テクスチャ塗りつぶし」を使用することです。

    Canvas には createPattern というメソッドがあり、既知のサイズの画像要素を塗りつぶし用のテクスチャ オブジェクトに変換できます。

    たとえば、サイズ 100px * 100px の test.jpg という名前の画像の円形効果を実装する場合、メインの JS コードは次のようになります。

    JavaScript コード
    コンテンツをクリップボードにコピーします
    1. // キャンバス要素、ピクチャー要素
    2. var Canvas = document.querySelector("#canvas")、image = 新しい画像();
      3. var
    3. context = Canvas.getContext("2d");
      4. image.onload =
    4. 関数
      5. () {
    5. // 画像テクスチャを作成
    6. var
      7. pattern = context.createPattern(image,
    7. "no-repeat"); 🎜> //円を描く
    8. context.arc(50, 50, 50, 0, 2 * Math.PI);
      9. // 描いた円を塗りつぶします
    10. context.fillStyle = パターン context.fill();
    11. };
    12. image.src =
      13. "test.jpg"
    13. ;

    14. Canvas コンテキストの fillStyle 属性値をこのテクスチャ オブジェクトと等しくするだけです。

      Canvas に付属の四角形描画 API には角丸属性がありません。そのため、デモの角丸四角形はカスタム メソッドを使用します。ざっと見てみたところ、縦方向と横方向で異なるフィレット サイズを実現するのは少し面倒であることがわかりました。デモンストレーションの目的で、それほど手間をかけずに、デモのフィレットは対称になっています。
      2016321105911393.png (319×314)

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：HTML5 で複数画像アップロード機能を実装_html5 チュートリアル スキル次の記事：HTML5 で複数画像アップロード機能を実装_html5 チュートリアル スキル

    関連記事

    続きを見る