15.2.9 模式

模式其实就是重复的图像， 可以用来填充或描边图形。要创建一个新模式， 可以调用createPattern()方法并传入两个参数：一个HTML <img>元素和一个表示如何重复图像的字符串。

其中，第二个参数的值与CSS 的background-repeat 属性值相同，包括"repeat"、"repeat-x"、"repeat-y"和"no-repeat"。看一个例子。

var image = document.images[0],
pattern = context.createPattern(image, "repeat");
//绘制矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

运行一下 需要注意的是，模式与渐变一样，都是从画布的原点(0,0)开始的。将填充样式（fillStyle）设置为模式对象，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复的图像。 上面的代码会得到如图15-13 所示的结果。 createPattern()方法的第一个参数也可以是一个<video>元素，或者另一个<canvas>元素。