HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5 CanvasでcreatePatternを使ってパターンを作成する方法

HTML5 Canvasでは、createPattern(image, repetition)メソッドを使用することで、画像をもとにしたパターンを簡単に作成できます。このメソッドは、塗りつぶしや線描のスタイルとして利用できるパターンオブジェクトを返します。

createPatternメソッドの基本構文

第1引数にはパターンの元となる画像（Image要素、Canvas要素など）を指定します。第2引数には繰り返し方法を表す文字列を指定します。

repetitionに指定できる値

  • repeat … 縦横両方向にパターンを繰り返します（デフォルト）
  • repeat-x … 水平方向のみ繰り返します
  • repeat-y … 垂直方向のみ繰り返します
  • no-repeat … 繰り返さず、1回だけ描画します

なお、空文字列やnullを指定した場合は、自動的に「repeat」が適用されます。

サンプルコード

以下のコードを実行すると、画像を読み込んでパターンを作成し、キャンバス上に描画する流れを確認できます。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width:100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script>
         function drawShape(){
            // DOMを使ってcanvas要素を取得
            var canvas = document.getElementById('mycanvas');
            
            // canvas非対応ブラウザでは実行しない
            if (canvas.getContext){
               // getContextで2D描画コンテキストを取得
               var ctx = canvas.getContext('2d');
               
               // パターンとして使用する新しい画像オブジェクトを作成
               var img = new Image();
               img.src = 'images/pattern.jpg';
               img.onload = function(){
                  // パターンを作成して塗りつぶしスタイルに設定
                  var ptrn = ctx.createPattern(img,'repeat');
                  ctx.fillStyle = ptrn;
                  ctx.fillRect(0,0,150,150);
               }
            } else {
               alert('このデモを表示するにはSafariまたはFirefox 1.5以降が必要です。');
            }
         }
      </script>
   </head>
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

ポイント

画像の読み込みは非同期で行われるため、必ずimg.onloadイベント内でcreatePatternを呼び出すことが重要です。読み込み完了前にパターンを作成しようとすると、意図した通りに描画されない場合があります。作成したパターンはfillStyleやstrokeStyleに代入することで、図形の塗りつぶしや輪郭線のスタイルとして活用できます。

  1. HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

    SVG（Scalable Vector Graphics）は、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるようになっています。HTMLのSVGで長方形を描画するには、<rect>要素を使用します。さらに、角を丸くしたい場合はrx属性とry属性を指定します。この2つの属性に値を設定することで、長方形の四隅が滑らかに丸められます。実装例以下のコードを実行すると、HTML5 SVGで角

  2. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：