HTML リファレンスマニュアル

HTML タグ全解

HTML canvas createPattern() メソッド

createPattern() は Canvas 2D API は指定された画像 (CanvasImageSource) を使用してパターンを作成するメソッドです。このメソッドは repetition パラメータを指定された方向に元画像を繰り返します。このメソッドは CanvasPattern オブジェクトを返します。 CanvasPattern ctx.createPattern(image, repetition);

HTML canvas 参考マニュアル

使用している画像：

オンラインサンプル

水平および垂直方向に画像を繰り返す：

JavaScript：

サンプル

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createPattern()メソッドの使用(基本チュートリアルウェブ　oldtoolbag.com)</title>
</head>
<body>
<p>画像の適用:/p>
<img src="haha.gif" id="lamp">
<p>キャンバス:/p>
<button onclick="draw('repeat')">繰り返し</button>　
<button onclick="draw('repeat-x')">繰り返し-x</button>　
<button onclick="draw('repeat-y')">繰り返し-y</button>　
<button onclick="draw('no-repeat')">繰り返し</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザはHTML5　canvasタグ。
</canvas>
<script>
function draw(direction)
{
　　　　var c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d);
　　　　ctx.clearRect(0,0,c.width,c.height);　
　　　　var img=document.getElementById("lamp")
　　　　var pat=ctx.createPattern(img,direction);
　　　　ctx.rect(0,0,220,128);
　　　　ctx.fillStyle=pat;
　　　　ctx.fill();
}
</script>
</body>
</html>

テストを見てみましょう ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox、Opera、Chrome、Safari が createPattern() メソッドをサポートしています。

注意：Internet Explorer 8 及びそれ以前のバージョンでは、<canvas> 要素がサポートされていません。

定義と使用方法

createPattern() メソッドは指定された方向で指定された要素を繰り返します。
この要素は画像、ビデオ、または別の <canvas> 要素です。
繰り返し可能な要素は、以下のように描画されます。/矩形、円、直線など、塗りつぶしを行います。

JavaScript 语法：	context.createPattern(image,"repeat\|repeat-x\|repeat-y\|no-repeat);

パラメータ値

パラメータ	説明
image	使用するパターンの画像、キャンバス、またはビデオ要素を指定します。
repeat	デフォルト。このモードは水平および垂直方向で繰り返されます。
repeat-x	このモードは水平方向でのみ繰り返されます。
repeat-y	このモードは垂直方向でのみ繰り返されます。
no-repeat	このモードは一度だけ表示され（繰り返しされません）。

HTML canvas 参考マニュアル

HTML: <template> タグ