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