《HTML5 canvas开发详解（第2版）》——2.9　用图案填充形状

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.9节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.9　用图案填充形状

本书将在第4章讲解如何在画布上使用位图，这里仅快速介绍如何将图像用作形状填充图案。

填充图案通过createPattern()函数进行初始化。它有两个参数：第一个是Image对象实例，第二个是String表示在形状中如何显示repeat图案。读者可以使用一个加载图像或者整个画布作为形状的填充图案。

有以下4种图像填充类型：

• repeat；
• repeat-x；
• repeat-y；
• no-repeat。
  现代的浏览器对这4种类型的支持程度不同，不过，普遍都能支持标准的repeat类型。先来介绍repeat类型，然后简单介绍其他3称类型。

图2-34显示了一个简单位图填充图案的功能测试，这是一个透明背景上的20×20的绿色圆形，存储为fill_20x20.gif文件。

https://yqfile.alicdn.com/be0ea95be5d0e0542af79f1513b10747a794ae7d.png" >

例2-25测试了使用repeat字符串创建一个充满小圆点的正方形，如图2-35所示。

例2-25　使用repeat填充图像文件

function drawScreen(){

　　　var fillImg = new Image();
　　　fillImg.src = 'fill_20x20.gif';
　　　fillImg.onload = function(){

　　　　 var fillPattern = context.createPattern(fillImg,'repeat');
　　　　 context.fillStyle = fillPattern;
　　　　 context.fillRect(0,0,200,200);
　　 }
}

如果没有加载完成，最好不要使用Image实例。第4章将会进行详细讨论，现在只需简单创建一个在线onload事件处理器功能，在Image就绪之后就会调用此事件。repeat图案字符串非常好地填充到了200×200的正方形中。repeat字符串代码如例2-26所示，结果如图2-36～图2-38所示。

例2-26　使用no-repeat、repeat-x和repeat-y字符串

function drawScreen(){

　　　var fillImg = new Image();
　　　fillImg.src = 'fill_20x20.gif';

　　　fillImg.onload = function(){

　　　　 var fillPattern1 = context.createPattern(fillImg,'no-repeat');
　　　　 var fillPattern2 = context.createPattern(fillImg,'repeat-x');
　　　　 var fillPattern3 = context.createPattern(fillImg,'repeat-y');

　　　　 context.fillStyle = fillPattern1;
　　　　 context.fillRect(0,0,100,100);

　　　　 context.fillStyle = fillPattern3;
　　　　 context.fillRect(0,220,100,100);


　　　　 context.franslate(0,110);
　　　　 context.fillStyle = fillPattern2;
　　　　 context.fillRect(0,0,100,100);
　　　}
}

提示
每种浏览器显示这些图案的方式都不一样，而且总在变化。所以，在开发时要用新浏览器检验一下。

https://yqfile.alicdn.com/9aba561693aed1ebfb5f4d51902113eb854276f4.png" >

https://yqfile.alicdn.com/f807275c1cb2d29880a3015464506a9ef6bfac96.png" >

https://yqfile.alicdn.com/cb75326086920c1994ccab64481351f3b0d1248c.png" >

请注意，如果要让repeat-x填充模式生效，则需要先平移到所绘制点的x、y坐标，然后使用是(0,0)作为fillRect函数的x、y坐标的参数。