createPattern（建立路徑樣式物件）
var pattern = createPattern(imageObject,repeat)
建立可重用模式（物件）。
該物件可以分配給任何 strokeStyle 和/或 fillStyle。
然後 stroke() 或 fill（）將使用物件的模式繪製 Path。
引數：
-
imageObject 是將用作圖案的影象。影象的來源可以是：
- HTMLImageElement —一個 img 元素或一個新的
Image()， - HTMLCanvasElement —一個 canvas 元素，
- HTMLVideoElement —一個視訊元素（將抓取當前視訊幀）
- ImageBitmap，
- 斑點。
- HTMLImageElement —一個 img 元素或一個新的
-
repeat 確定如何在畫布上重複 imageObject（很像 CSS 背景）。此引數必須是引號分隔的，有效值為：
- 重複—圖案將水平和垂直填充畫布
- “repeat-x”—圖案只會水平重複（1 個水平行）
- “repeat-y”—圖案只會垂直重複（1 個垂直行）
- 重複無—圖案只出現一次（在左上角）
模式物件是一個物件，你可以使用（並重複使用！）來使路徑筆劃和填充變得有圖案。
側注： 模式物件不是 Canvas 元素的內部物件，也不是 Context。它是一個獨立且可重用的 JavaScript 物件，你可以將其分配給你想要的任何路徑。你甚至可以使用此物件將模式應用於另一個 Canvas 元素上的 Path（！）
有關 Canvas 模式的重要提示！
建立模式物件時，整個畫布將無形地填充該模式（受 repeat 引數限制）。
當你通過一條路徑時，會發現隱形圖案，但只會在被撫摸或填充的路徑上顯示出來。
- 從你要用作圖案的影象開始。重要（！）：在嘗試使用影象建立圖案之前，請確保影象已完全載入（使用
patternimage.onload）。
-
你建立這樣的模式：
// create a pattern var pattern = ctx.createPattern(patternImage,'repeat'); ctx.fillStyle=pattern; -
然後 Canvas 將無形地看到你的模式建立如下：
-
但是直到你使用這個模式，你才能看到 Canvas 上的模式。
-
最後，如果使用模式描邊或填充路徑，隱形模式在畫布上變得可見…但僅限於繪製路徑的位置。
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// fill using a pattern
var patternImage=new Image();
// IMPORTANT!
// Always use .onload to be sure the image has
// fully loaded before using it in .createPattern
patternImage.onload=function(){
// create a pattern object
var pattern = ctx.createPattern(patternImage,'repeat');
// set the fillstyle to that pattern
ctx.fillStyle=pattern;
// fill a rectangle with the pattern
ctx.fillRect(50,50,150,100);
// demo only, stroke the rect for clarity
ctx.strokeRect(50,50,150,100);
}
patternImage.src='http://i.stack.imgur.com/K9EZl.png';
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=325 height=250></canvas>
</body>
</html>