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://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/setTransform/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 上での変化を確認してください:
仕様
Specification |
---|
HTML Standard # dom-canvaspattern-settransform-dev |
ブラウザ実装状況
BCD tables only load in the browser
関連項目
- これを定義しているインターフェース:
CanvasPattern
SVGMatrix
(en-US)