图案(Pattern)
如果要创建自定义图案用于填充及线条，规范提供了createPattemO方法。与drawImage0类似，它接受图像、画布或者视频元素作为输人，参数repetition定义为图案的循环类型：
context.createPattern(image,repetition)
根据CSS规范的背景色属性，循环参数的有效值为repeat、repeat-x、repeat-y以及no-repeat。我们再次使用16种基本色，用几行代码来创建出一系列多变的图案，每个图案都用了两种颜色(见图3)。
该图案由4个10x10像素的正方形在20x20像索宽的画布上绘成。以绿色图案为例，其创建步骤如下：
varcvs=document.createElement("CANVAS");cvs.width=20；cvs.height=20;
varctx=cvs.getContext('2d,);
ctx.fillStyle=lime’；
ctx.fillRectfo,0,l0,l0);
ctx.fillRect(10,l0);
ctx.干illStyle='green';
ctxfillRect(10);
ctx.fillRect(0);
我们将画布CVS定义为createPattemO所使用的循环图案，指派给filistyle属性，并用来填充该正方形：
context.fillStyle=context.createPattern(cvs,'repeat');context.fillRect(0,,);图案被锚定在坐标原点，并从该点开始绘制。若你想要令fillRectO开始于偏右10像素的位置，就用1代替,这样左上角的开始色将是绿色而非石灰色。
除了自定义的画布元素外，
宁波网站制作认为我们还可以用图像作为源图案。图4的案例使用了createPattemO来填充背景，为文字标题创建了底纹图案，并将我们熟悉的约塞米蒂图片剪切为若干独立部分。
首先我们来了解一下这个背景是如何形成的：
varbg=newImage();
bg.src='icons/patternpng’；
bg.onload=function()Jcontext.globalAlpha=；context.tillStyle=context.createPattern(bg,1repeat');context.fillRect(0,0,canvas.width,canvas.height);>；头两行代码创建了一个新的Image对象，弓丨用了icons文件夹下的图片pattem_.png。跟drawImageO类似，我们也需要确保此图像在定义图案前加载完毕。bg.on[a-z]o[a-z]d()函数包含了用于生成循环图案的代码，我们将图案的透明度设为50%,并应用到整张画布。另外，我们还用同样的办法将图像pattem_.png填充到标题文字“Yosemite!”中。
要创建7张照片的部分截选，我们仅需要将整个约塞米蒂照片y0semite.jPg作为图案，并在数组extents中设置7个截选范围，最后运行for循环生成这些照片。extents包含每个截选部分的x坐标、y坐标、宽度及高度。这些截选的区域被当做图案通过fiURectO填充，并通过strokeRect()获得边框：varextents=[{x:20,y：50>width:l20,height：550}11and7others...varimage=newImage();image.src='images/yosemite.jpg';
image.onload=function(){
context.fillStyle=context.createPattern(image,'no-repeat'
)；
for(vari=0;i
//createallimagesbg.onload=function(){IIdrawbackgroundimage.onload=function(){//addimagecutoutspat.onload=干unction(){//filltitlewithpattern如果不想这样嵌套，唯一的可行方法是先将所有相关图像都作为img元素链接到HTML页面里，并设为visibility:hidden隐藏起来，在window.onload()加载完页面后，再通过getElementById()或getElementsByTagName()引用这些图片。
在进入下一章前，我们还需要提醒一件事：把视频元素用作createPattemO的源时，与drawImageO方法类似，视频的第一帧或海报帧(如果有的话)将被作为图案使用。
本文由乐华网络编辑，转载请注明出处
宁波网站制作www.leseo.net
