createPattern作用
createPattern() 方法在指定的方向內重復指定的元素。
元素可以是圖片、視頻，或者其他 <canvas> 元素。
被重復的元素可用於繪制/填充矩形、圓形或線條等等。
網站http://www.w3school.com.cn/tags/canvas_createpattern.asp中基本介紹
語法：
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
createPattern參數值
| 參數 | 描述 |
|---|---|
| image | 規定要使用的圖片、畫布或視頻元素。 |
| repeat | 默認。該模式在水平和垂直方向重復。 |
| repeat-x | 該模式只在水平方向重復。 |
| repeat-y | 該模式只在垂直方向重復。 |
| no-repeat | 該模式只顯示一次（不重復）。 |
createPattern用法舉例
1）使用圖片填充
使用到的圖片：
repeat的幾種方式，大家可以在jsfiddle上修改代碼運行看看效果。
也許你覺得這個圖標太大了，想讓它變得更小更密，所以想改變image的寬高是否能實現這個效果呢？事實是不能，canvas只會將按照原圖大小填充。那怎么解決這個問題呢？
這就用到了下面使用canvas填充的方式
2）使用canvas填充
創建一個臨時的canvas，用canvas 的drawImg()方法，對圖片進行縮放，然后在再把canvas 傳到createPattern里面。以此達到createPattern縮放內容的效果。
3）使用視頻填充
和圖片填充類似，只需要在createpattern使用video標簽即可，但是你也會發現繪制的重復內容只是視頻的第一幀內容
1 var c = document.getElementById("canvas"); 2 var ctx = c.getContext("2d"); 3 var video = document.createElement("video") 4 video.src = "https://dl.xueleyun.com/files/mp4_3e100520985a66003c1b9a104fd36143.mp4" 5 video.onloadeddata = function () { 6 var pat = ctx.createPattern(video, "repeat"); 7 ctx.rect(60, 10, c.width - 20, c.height - 20); 8 ctx.fillStyle = pat; 9 ctx.fill(); 10 }
填充位置
另外需要注意的是，在第一個代碼實例中，如果我們將矩形的起始坐標x調整下，渲染出來的效果如下圖所示。
通過這個效果你應該能清楚，填充的起始位置是畫布的原點，並不是要填充圖形rect的起始位置。
應用實例
刮塗層贏大獎
前面我們的實例中都是用createpattern填充矩形，如果是填充畫線stroke的話也是可以的，下面簡單實現一個刮塗層的示例，結合鼠標拖拽繪制線條的代碼，效果如下：