本节书摘来自异步社区《html5 canvas开发详解（第2版）》一书中的第2章，第2.9节,作者： 【美】steve fulton , jeff fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
本书将在第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所示。
如果没有加载完成，最好不要使用image实例。第4章将会进行详细讨论，现在只需简单创建一个在线onload事件处理器功能，在image就绪之后就会调用此事件。repeat图案字符串非常好地填充到了200×200的正方形中。repeat字符串代码如例2-26所示，结果如图2-36～图2-38所示。
提示
每种浏览器显示这些图案的方式都不一样，而且总在变化。所以，在开发时要用新浏览器检验一下。
https://yqfile.alicdn.com/9aba561693aed1ebfb5f4d51902113eb854276f4.png" >
https://yqfile.alicdn.com/f807275c1cb2d29880a3015464506a9ef6bfac96.png" >
https://yqfile.alicdn.com/cb75326086920c1994ccab64481351f3b0d1248c.png" >
当repeat参数使用repeat-x和repeat-y字符串时，只有firefox看起来差别明显。第4章将更多地讲解位图填充和其他用法的示例。
请注意，如果要让repeat-x填充模式生效，则需要先平移到所绘制点的x、y坐标，然后使用是(0,0)作为fillrect函数的x、y坐标的参数。