createPattern

2023年08月12日

柏拉文

越努力，越幸运

一、认识

---

ctx.createPattern() 是 Canvas 2D API 使用指定的图像 (CanvasImageSource) 创建模式的方法。它通过 repetition 参数在指定的方向上重复元图像。此方法返回一个 CanvasPattern 对象。

二、语法

---

const cavasPattern = 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

• cavasPattern: 描述模式的不透明对象