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
html
<canvas id="canvas"></canvas> <svg id="svg1"></svg>
JavaScript
js
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)