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.fillStyle=context.createPattern(fillImg, 'repeat-x');
context.fillRect(0, 0, 580, 200);
运行结果：
这里为了凸显出 repeat-x 效果，通过 context.translate() 方法把图片先移动到 (210,400）作为 fillRect() 方法的原点坐标。
网友评论