HTML | 画布 createPattern() 方法

介绍

HTML5 的 Canvas 元素是一个非常强大的工具，它可以用来绘制各种复杂的图形和图像。Canvas 的绘图 API 提供了一系列方法，用于创建复杂的图案和纹理。其中，createPattern() 方法可以用于创建一个填充图案。可以是另一个 Canvas 元素，也可以是一个图片，甚至是另一种颜色组合。

语法

let pattern = context.createPattern(image, repetition);

参数说明：

• image：填充图案的来源，可以是一个图片对象Image，也可以是一个 Canvas 对象。
• repetition：如何平铺填充图案，可以是以下值之一：
  • "repeat"：默认值，水平和垂直方向都重复。
  • "repeat-x"：水平方向重复，垂直方向不重复。
  • "repeat-y"：水平方向不重复，垂直方向重复。
  • "no-repeat"：水平和垂直方向都不重复。

示例

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

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 150, 150);

// 创建一个填充图案
let img = new Image();
img.src = "pattern.png";
img.onload = function() {
  let pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 150, 150);
}

注意事项

• 图片加载时间需要通过 onload 事件监听，确保图片已经加载完毕再使用 createPattern() 方法。
• 如果填充图案源是一个 Canvas 对象，则该源 Canvas 的内容必须在填充发生之前已经绘制完成。如果源 Canvas 尚未准备妥当，则此方法将返回 null。
• 由于被引用的 Canvas 对象可能与调用 createPattern() 方法的 Canvas 不在同一个域下，可能会导致跨域问题，需要注意解决方案。

总结

createPattern() 方法是 Canvas 绘图 API 中用来创建填充图案的方法之一，可以通过该方法创建出各种颜色和纹理的图案来填充 Canvas 绘制的形状。需要注意填充图案的来源和如何平铺填充图案的设置，以及跨域问题的解决。