HTML canvas createPattern() 方法
要使用的图片:
实例
水平和垂直重复图像:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
亲自试一试 »
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
方法 | |||||
---|---|---|---|---|---|
createPattern() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定义和用法
createPattern() 方法在指定方向重复指定元素。
元素可以是图像、视频或其他 <canvas> 元素。
重复元素可用于绘制/填充矩形、圆形、线条等。
JavaScript 语法: | context.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat"); |
---|
参数值
参数 | 描述 | Play it |
---|---|---|
image | 指定要使用的图案的图像、画布或视频元素 | |
repeat | 默认。 图案水平和垂直重复 | Play it » |
repeat-x | 图案仅水平重复 | Play it » |
repeat-y | 图案仅垂直重复 | Play it » |
no-repeat | 图案只会显示一次(不重复) | Play it » |
❮ Canvas 对象