MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.createPattern()

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变化:

规范描述

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)

参见

文档标签和贡献者

 此页面的贡献者: ice-i-snow, teoli, cuixiping
 最后编辑者: ice-i-snow,