《HTML5 Canvas开发详解》——2.9　用图案填充形状

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第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的.gif格式文件。

https://yqfile.alicdn.com/842698544751c773ff4d82dd75f33bcc93938cdf.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所示。

https://yqfile.alicdn.com/ebffe3760fe0b4be6b1e6b16b093dc52125f66e8.png" > 例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 = fillPattern2; 　　　　 context.fillRect(0,110,100,100); 　　　　 context.fillStyle = fillPattern3; 　　　　 context.fillRect(0,220,100,100); 　　　} }

提示：每种浏览器显示这些图案的方式都不一样。当repeat参数使用repeat-x和repeat-y字符串时，只有Firefox看起来有差别明显。第4章将更多地讲解位图填充和其他用法的示例。

https://yqfile.alicdn.com/13a13c9ece8d2502c1c19af36250e8d50c680342.png" >

https://yqfile.alicdn.com/3fbd16a403fac2d4681de05d1bd38a02156eba51.png" >