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),
  • "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
HTML Standard
# dom-context-2d-createpattern-dev

浏览器兼容性

BCD tables only load in the browser

参见