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>