CanvasRenderingContext2D.createPattern() - 画像の塗りつぶしをするCanvasPatternオブジェクトを作成する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、CanvasRenderingContext2DオブジェクトのcreatePattern()は、canvasを、画像で塗りつぶすCanvasPatternオブジェクトを作成するためのメソッドです。このメソッドによって作成したオブジェクトを、fillStyleプロパティなどに指定することで、画像での塗りつぶしが実現します。第1引数にはソースとなる要素を、第2引数には繰り返し表示のパターンを指定します。

サンプルコード

<canvas id="target"></canvas>

<img id="image" src="./image.png">
<video id="video" src="./video.mp4"></video>
<canvas id="canvas"></canvas>

// キャンパス要素を取得
var canvas = document.getElementById( "target" ) ;

// 二次元グラフィックスのコンテキスト(CanvasRenderingContext2D)を取得
var context = canvas.getContext( "2d" ) ;

// 対象となるimg、video、またはcanvas要素を取得
var imageElement = document.getElementById( "image" ) ;	// 画像の場合
var videoElement = document.getElementById( "video" ) ;	// ビデオの場合
var canvasElement = document.getElementById( "canvas" ) ;	// canvasの場合

// CanvasPatternオブジェクトを作成
// 第2引数
// repeat … X方向、Y方向に繰り返し
// repeat-x … X方向にだけ繰り返し
// repeat-y … Y方向にだけ繰り返し
// no-repeat … 繰り返さない
var pattern = context.createPattern( imageElement, "repeat" ) ;	// 画像の場合
var pattern = context.createPattern( videoElement, "repeat" ) ;	// 動画の場合
var pattern = context.createPattern( canvasElement, "repeat" ) ;	// canvasの場合

// 塗りつぶしの実行 (応用)
context.rect( 0,0, 200,200 ) ;	// 塗りつぶしの範囲を決定
context.fillStyle = pattern ;	// 塗りつぶしのスタイルにCanvasPatternオブジェクトを指定
context.fill() ;	// 塗りつぶしを実行

デモ

第1引数と第2引数を組み合わせた動作確認ができます。ここで意識しておいてほしいのは、あくまでもcreatePattern()はオブジェクト、言わば材料を作るだけのメソッドだということです。「描画」を押した時に描画する処理は、別のメソッドを使った別の処理です。video要素はサイズが大きすぎるので繰り返し表示の効果が分かりませんが(笑)、ここでは「video要素も画像として繰り返し表示できる」ということだけ確認しておきましょう。

RUN
HTML
CSS
JavaScript

<div id="parent"> <canvas id="target"></canvas> </div> <p><a id="method1" class="first">第1引数→img要素</a></p> <p><a id="method2" class="first">第1引数→video要素</a></p> <p><a id="method3" class="first">第1引数→canvas要素</a></p> <p><a id="method4" class="second">第2引数→repeat</a></p> <p><a id="method5" class="second">第2引数→repeat-x</a></p> <p><a id="method6" class="second">第2引数→repeat-y</a></p> <p><a id="method7" class="second">第2引数→no-repeat</a></p> <p><a id="method8">描画</a></p> <p><a id="method9">リセット</a></p> <div class="info"> <div><p>img要素</p><p><img id="image" src="/character-s.png"></p></div> <div><p>video要素</p><p class="video-parent"><video id="video" src="/dog.mp4" controls></video></p></div> <div><p>canvas要素</p><p><canvas id="canvas"></canvas></p></div> </div>

#parent { border: 1px solid #333 ; padding: 18px 0 ; } #target { width: 200px ; height: 200px ; background: #f2f2f2 ; margin: 0 auto ; display: block ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; } code { background: #f2f2f2 ; } .video-parent { position: relative ; height: 0 ; padding-bottom: 56.25% ; } video { position: absolute ; width: 100% ; height: 100% ; } .info { margin-top: 24px ; padding-top: 24px ; border-top: 1px solid #333 ; }

// キャンパス要素を取得 var canvas = document.getElementById( "target" ) ; // キャンパスのサイズ canvas.width = 200 ; canvas.height = 200 ; // 二次元グラフィックスのコンテキスト(CanvasRenderingContext2D)を取得 var context = canvas.getContext( "2d" ) ; // 塗りつぶしの範囲 context.rect( 0,0, 200,200 ) ; // img要素 var imageElement = document.getElementById( "image" ) ; // video要素 var videoElement = document.getElementById( "video" ) ; // canvas要素 var canvasElement = document.getElementById( "canvas" ) ; // グローバル変数 var pattern, targetElement = imageElement, targetStyle = "repeat" ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { targetElement = imageElement ; // 第1引数に指定する値を指定 buttonSelect( this, "first" ) ; // ボタンの色変更 } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { targetElement = videoElement ; // 第1引数に指定する値を指定 buttonSelect( this, "first" ) ; // ボタンの色変更 } ) ; // クリックイベント3 document.getElementById( "method3" ).addEventListener( "click", function() { targetElement = canvasElement ; // 第1引数に指定する値を指定 buttonSelect( this, "first" ) ; // ボタンの色変更 } ) ; // クリックイベント4 document.getElementById( "method4" ).addEventListener( "click", function() { targetStyle = "repeat" ; // 第2引数に指定する値を指定 buttonSelect( this, "second" ) ; // ボタンの色変更 } ) ; // クリックイベント5 document.getElementById( "method5" ).addEventListener( "click", function() { targetStyle = "repeat-x" ; // 第2引数に指定する値を指定 buttonSelect( this, "second" ) ; // ボタンの色変更 } ) ; // クリックイベント6 document.getElementById( "method6" ).addEventListener( "click", function() { targetStyle = "repeat-y" ; // 第2引数に指定する値を指定 buttonSelect( this, "second" ) ; // ボタンの色変更 } ) ; // クリックイベント7 document.getElementById( "method7" ).addEventListener( "click", function() { targetStyle = "no-repeat" ; // 第2引数に指定する値を指定 buttonSelect( this, "second" ) ; // ボタンの色変更 } ) ; // クリックイベント8 document.getElementById( "method8" ).addEventListener( "click", function() { // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; // CanvasPatternオブジェクトを作成 pattern = context.createPattern( targetElement, targetStyle ) ; // 塗りつぶしの実行 (応用) context.rect( 0,0, 200,200 ) ; // 塗りつぶしの範囲を決定 context.fillStyle = pattern ; // 塗りつぶしのスタイルにCanvasPatternオブジェクトを指定 context.fill() ; // 塗りつぶしを実行 } ) ; // リセット document.getElementById( "method9" ).addEventListener( "click", function() { // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; } ) ; // ボタンの色 function buttonSelect( element, className ) { for( var a=document.getElementsByClassName( className ),i=a.length; i--; ) { a[i].style.backgroundColor = "#f2f2f2" ; a[i].style.color = "#333" ; } var targetButton = element || a[0] ; targetButton.style.backgroundColor = "#2660A1" ; targetButton.style.color = "#fff" ; } // ボタンの初期選択 buttonSelect( 0, "first" ) ; buttonSelect( 0, "second" ) ; // サンプル用のcanvasを用意 canvasElement.width = 25 ; canvasElement.height = 25 ; var context2d = canvasElement.getContext( "2d" ) ; context2d.rect( 0,0, 25,25 ) ; context2d.fillStyle = "#2660A1" ; context2d.fill() ; context2d.beginPath() ; context2d.rect( 0,0, 12.5,12.5 ) ; context2d.rect( 12.5,12.5, 5.5,5.5 ) ; context2d.rect( 18,18, 4.5,4.5 ) ; context2d.rect( 22.5,22.5, 2.5,2.5 ) ; context2d.fillStyle = "#D36015" ; context2d.fill() ;

構文

CanvasPattern = CanvasRenderingContext2D.createPattern( element, repeat ) ;

引数

項目	説明
element	第1引数には、繰り返し表示の対象となるimg、video、canvas要素のいずれかを指定する。なお、画像などの読み込みが完了する前に`createPattern()`を実行すると、読み込まれていない時点の情報を元にオブジェクトが作成されるため真っ黒になってしまうので注意。
repeat	繰り返しのパターンを4種類の中から指定する。 repeat X方向、Y方向に繰り返す。 repeat-x X方向にだけ繰り返す。 repeat-y Y方向にだけ繰り返す。 no-repeat 繰り返さない。

戻り値

項目	説明
CanvasPattern	作成したCanvasPatternオブジェクトを取得する。

ノート

サポート状況: 主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
読み込みタイミングに注意: 例えば、createElement()を使って即席でimg要素を作成し、肝心のリソース(画像)の読み込みが完了する前にcreatePattern()を実行すると、画像は真っ黒になってしまう。メソッドを実行した後にリソースが読み込まれても意味がない。あくまでも、メソッドを実行する時点でリソースの読み込みが完了していなければいけない。