作者:李大乔vivi | 来源:互联网 | 2023-10-11 17:57
context的createPattern()方法可以在指定的方向内重复指定的元素。语法为context.createPattern(image,repeat|repe
context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
。
参数 |
描述 |
image |
要使用的图片、画布或视频元素。 |
repeat |
默认值,表示在水平和垂直方向重复。 |
repeat-x |
表示在水平方向重复。 |
repeat-y |
表示在垂直方向重复。 |
no-repeat |
表示只显示一次(不重复)。 |
假设有一张图片,我们只用这张图片来填充正方形,图片存储为 girl.jpg。
该图片来源于网络。
Steve Fulton 与 Jeff Fulton 举了一个图片填充的示例(做了改写)。
var fillImg = new Image();
fillImg.src = 'girl.jpg';
fillImg.Onload= function () {
context.fillStyle = context.createPattern(fillImg, 'repeat');
context.fillRect(0, 0, 600, 600);
}
运行结果:
首先创建了一个 Image() 对象,并设定好图片地址;接着定义 onload 事件,平铺放置该图片。
也可以选择不平铺(no-repeat)、y 轴平铺(repeat-y)或者 x 轴平铺(repeat-x)。
context.fillStyle = context.createPattern(fillImg, 'no-repeat');
context.fillRect(0, 0, 200, 200);
context.fillStyle = context.createPattern(fillImg, 'repeat-y');
context.fillRect(0, 220, 200, 580);
context.translate(210,400);
context.fillrepeat-x');
context.fillRect(0, 0, 580, 200);
运行结果:
这里为了凸显出 repeat-x 效果,通过 context.translate() 方法把图片先移动到 (210,400)作为 fillRect() 方法的原点坐标。