Canvas createPattern() 方法
要使用的图像
示例
水平和垂直重复图像
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
尝试一下 »
描述
createPattern() 方法在指定方向重复指定元素。
元素可以是图像、视频或另一个 <canvas> 元素。
重复的元素可用于绘制/填充矩形、圆形、线条等。
| JavaScript 语法 | context.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat"); |
|---|
参数值
| 参数 | 描述 |
|---|---|
| image | 指定要使用的图案的图像、画布或视频元素 |
| repeat | 默认值。图案在水平和垂直方向上重复 |
| repeat-x | 图案仅在水平方向上重复 |
| repeat-y | 图案仅在垂直方向上重复 |
| no-repeat | 图案仅显示一次（不重复） |
浏览器支持
<canvas> 元素是 HTML5 标准（2014 年）。
createPattern() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
