本節書摘來自異步社群《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坐标的參數。