CanvasPattern.setTransform()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

CanvasPattern .setTransform() method uses an SVGMatrix or DOMMatrix object as the pattern's transformation matrix and invokes it on the pattern.

句法

void pattern.setTransform(matrix);

参数

matrix: SVGMatrix or DOMMatrix to use as the pattern's transformation matrix.

范例

使用 `setTransform` 方法

This is just a simple code snippet which uses the setTransform method to create a CanvasPattern with the specified pattern transformation from an SVGMatrix . The pattern gets applied if you set it as the current fillStyle and gets drawn onto the canvas when using the fillRect() method, for example.

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);
};

Note that newer browser versions started to support DOMMatrix as an input to setTransform() , so for example you could replace the SVGMatrix in the above example with the following:

const matrix = new DOMMatrix([1, .2, .8, 1, 0, 0]);

Edit the code below and see your changes update live in the canvas:

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<svg id="svg1" style="display:none"></svg>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
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);
};</textarea>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
var svg1 = document.getElementById('svg1');
var matrix = svg1.createSVGMatrix();
function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}
reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});
edit.addEventListener('click', function() {
  textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasPattern.setTransform' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`setTransform`	Chrome 68	Edge 79	Firefox 33	IE No	Opera 9	Safari 3.1	WebView Android 68	Chrome Android 68	Firefox Android 33	Opera Android 10.1	Safari iOS 11	Samsung Internet Android 10.0
`DOMMatrix` parameter supported	Chrome Yes	Edge Yes	Firefox 79	IE No	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android No	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持
不支持

另请参阅

The interface defining this method: CanvasPattern
SVGMatrix
DOMMatrix

元数据

最后修改： Jul 2, 2020

在此页

句法

参数

范例

使用 setTransform 方法