CanvasRenderingContext2D.createPattern()

CanvasPattern ctx.createPattern(image, repetition);

image

作为重复图像源的 CanvasImageSource 对象。可以是下列之一：

• HTMLImageElement (<img>),
• HTMLVideoElement (<video>),
• HTMLCanvasElement (<canvas>),
• CanvasRenderingContext2D,
• ImageBitmap,
• ImageData,
• Blob.

repetition

DOMString，指定如何重复图像。允许的值有：

• "repeat" (both directions),
• "repeat-x" (horizontal only),
• "repeat-y" (vertical only),
• "no-repeat" (neither).

如果为空字符串 ('') 或 null (但不是 undefined)，repetition 将被当作"repeat"。

CanvasPattern

描述模式的不透明对象

这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的CanvasPattern 对象。创建完成后，可以使用CanvasPattern.setTransform()方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的fillStyle，当你使用fillRect() 方法时，会在 canvas 上绘制出效果。

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "canvas_createpattern.png";
img.onload = () => { // Only use the image after it's loaded
  const pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 300, 300);
};

• 接口定义， CanvasRenderingContext2D
• CanvasPattern