CanvasPattern.setTransform()
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CanvasPattern
.setTransform()
メソッドは、パターンの変換マトリックスとして SVGMatrix
(en-US) オブジェクトを使用し、パターンにこれを実行します。
構文
void pattern.setTransform(matrix);
パラメータ
matrix
- パターンの変換行列として使用する
SVGMatrix
(en-US)。
例
setTransform
メソッドを使用する
これは setTransform
メソッドを使用して SVGMatrix
(en-US) によるパターン変形を指定して CanvasPattern
を生成する簡単なコードスニペットです。たとえば、パターンが現在の fillStyle
として適用され、fillRect()
メソッドを使用すると、 canvas に描画されます。
HTML
<canvas id="canvas"></canvas>
<svg id="svg1"></svg>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var svg1 = document.getElementById("svg1");
var matrix = svg1.createSVGMatrix();
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
pattern.setTransform(matrix.rotate(-45).scale(1.5));
ctx.fillStyle = pattern;
ctx.fillRect(0,0,400,400);
};
以下のコードを編集して、canvas 上での変化を確認してください:
仕様
仕様 | ステータス | コメント |
---|---|---|
HTML Living Standard CanvasPattern.setTransform の定義 |
現行の標準 |
ブラウザ実装状況
BCD tables only load in the browser
関連項目
- これを定義しているインターフェース:
CanvasPattern
SVGMatrix
(en-US)