说说在 Canvas 中如何用图片来填充形状

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() 方法的原点坐标。