CanvasRenderingContext2D
.createPattern()
是 Canvas 2D API 使用指定的图像 (CanvasImageSource
)创建模式的方法。 它通过repetition参数在指定的方向上重复元图像。此方法返回一个CanvasPattern
对象。
语法
CanvasPattern ctx.createPattern(image, repetition);
参数
image
- 做为重复图像源的
CanvasImageSource
对象。可以是下列之一: repetition
DOMString
,指定如何重复图像。允许的值有:"repeat"
(both directions),"repeat-x"
(horizontal only),"repeat-y"
(vertical only), or"no-repeat"
(neither).
''
) 或null
(但不是undefined
),repetition将被当作"repeat"。
返回值
CanvasPattern
- 描述模式的不透明对象
示例
使用createPattern
方法
这是一段简单的代码片段,使用 createPattern 方法创建一个指定图像和重复的CanvasPattern
对象。创建完成后,可以使用CanvasPattern.setTransform()
方法对图案进行变形。如示例所示,你可以把此模式赋值给当前的fillStyle
,当你使用fillRect()
方法时,会在 canvas 上绘制出效果。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; ctx.fillRect(0,0,400,400); };
编辑以下代码并在线查看canvas变化:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <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'); 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; 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);
规范描述
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.createPattern |
Living Standard | |
HTML Canvas 2D Context (W3C) CanvasRenderingContext2D.createPattern |
Recommendation |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |