CanvasPattern.setTransform()

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

CanvasPattern.setTransform() メソッドは、パターンの変換マトリックスとして SVGMatrix オブジェクトを使用し、パターンにこれを実行します。

構文

void pattern.setTransform(matrix);

パラメータ

matrix
パターンの変換行列として使用する SVGMatrix

setTransform メソッドを使用する

これは setTransform メソッドを使用して SVGMatrix によるパターン変形を指定して 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 の定義
現行の標準  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート ? 33 (33) ? ? ?
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? 33.0 (33) ? ? ?

関連項目

ドキュメントのタグと貢献者

このページの貢献者: yamaguchi-takayuki, YuichiNukiyama
最終更新者: yamaguchi-takayuki,