HTML5 canvas createPattern メソッド
 HTML5 canvas リファレンス
例
矩形の塗りつぶしパターンとして画像を使用します:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("myImage");
var
pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
Try it yourself »
定義と用法
createPattern メソッドは、キャンバス上で使用するパターンを作成するためオブジェクトを使用します。
オブジェクトは、イメージ、ビデオ、または他のcanvas要素にすることができます。
パターンは、矩形、円、線などの描画/塗りつぶしに使用することができます。
| JavaScript 構文: |
context.createPattern(image,"repeat"); |
ブラウザ・サポート
createPattern メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
値 |
説明 |
Play it |
| image |
image |
パターンを作成するときに使用するイメージオブジェクト |
|
| repeat |
repeat |
デフォルト。パターンは、水平方向にも垂直方向にも繰り返す |
Play it » |
| repeat-x |
Tパターンは、水平方向に繰り返す |
Play it » |
| repeat-y |
パターンは、垂直方向に繰り返す |
Play it » |
| no-repeat |
パターンは、繰り返さずに一度だけ表示する |
Play it » |
HTML5 canvas リファレンス
|