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"); |
|---|
参数值
| 参数 | 描述 |
|---|---|
| 图片 | 指定要使用的图案的图像、画布或视频元素 |
| 重复 | 默认。图案同时在水平和垂直方向上重复 |
| repeat-x | 图案仅在水平方向上重复 |
| repeat-y | 图案仅在垂直方向上重复 |
| no-repeat | 图案仅显示一次（不重复） |
浏览器支持
<canvas> 元素是 HTML5 标准（2014）。
createPattern() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
