1、createPattern
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 在指定的方向上重复指定的元素
参数： image指实用的图片，画布或者是视频对象 第二个参数表示重复的方式
看这后面的参数，很容易想到css中的background-repeat，第一个参数我得说一下，这里跟background不一样，不是引用的图片地址，而是一个图片对象，这里特别注意，我们分别看一下这些重复方式的表现：
var aImg = new Image();
aImg.src = '4.jpg';
aImg.onload = function(){
draw(this);
}
function draw(obj){
//这里为了演示方便，把其他的先注释
//var bg = ctx.createPattern(obj,"repeat");
//var bg = ctx.createPattern(obj,"repeat-x");
//var bg = ctx.createPattern(obj,"repeat-y");
var bg = ctx.createPattern(obj,"no-repeat");
ctx.fillStyle = bg;
ctx.fillRect(0,0,400,400);
}
恩，跟css的background-repeat的效果是一样的，那就好理解了，但是canvas是没有background-position的，恩，这个效果就是这样，没什么好讲的！
具体效果看这里 —— canvas 背景重复
2、gloableCompositeOperation
gloableCompositeOperation() 设置或返回新图像如何绘制到已有的图像上
参数：
source-over 默认，在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像，即相交部分图形先后填充来增加亮度
copy 显示源图像。忽略目标图像，即只显示源图像
xor 使用异或操作对源图像与目标图像进行组合，即相交部分为透明
不常用的：
multiply 源图像的像素乘以目标图像的像素
screen
overlay
darken 加深，相交部分图形先后填充来降低亮度
lighten 加亮，相交部分图形先后填充来增加亮度
color-dodge 将底层调到顶层，即将目标图像调到源图像上方
color-burn 将底层调到顶层，然后反转
hard-light 将底层调到顶层，然后 multiply效果与screen叠加
soft-light
difference
exclusion
hue
saturation
color
luminosity
由于英文不好，部分的常用的参数的意思不太好解释，为了不误导大家，我就不翻译了，如果有英文比较好的，看看这里 gloableCompositeOperation参数解释 ，要是能比较清楚的翻译的话，希望你能把翻译的意思告诉我，不胜感谢，英语是硬伤啊！不过后面的运行结果我会给到大家参考！
参数很多，我们先看看常用的，前面八个很好理解，就是一个反的，首先我们需要理解，什么是目标图形？什么是源图形？
目标图像 = 您已经放置在画布上的绘图；源图像 = 您打算放置到画布上的绘图。这是官方的解释，如果你对这个解释不理解，我们可以这么理解，就是先画的图像是目标图形，后画的图像是源图像，例如：
//目标图像 ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); ctx.globalCompositeOperation="source-over"; //源图像 ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50);
当然这个gloableCompositeOperation的位置不是固定的，可以放到目标图像前面，也可以放到目标图像后面，但是不能放到源图像后面（你们懂的），参数意思如不好理解，看下图，看看是什么表现：
var arr = ['source-over','source-atop','source-in','source-out','destination-over','destination-atop','destination-in','destination-out','lighter','copy','xor','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
for(var i=0;i<arr.length;i++){
document.write("<p id='p_" + i + "' style='float:left;'>" + arr[i] + ":<br>");
var canvas = document.createElement("canvas");
canvas.width = 120;
canvas.height = 100;
canvas.style.border = "1px solid #000";
canvas.style.marginRight = '10px';
document.getElementById("p_" + i).appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation=arr[i];
ctx.beginPath();
ctx.fillStyle="green";
ctx.fillRect(30,30,50,50);
ctx.fill();
document.write("</p>");
}红与绿
红与蓝
具体效果你也可以看这里 —— canvas图形组合模式
里面的代码我故意把canvas的代码留在上面，方便你们查看，不知道你看到这些参数有什么感想，我的第一感觉就是有些熟悉比clip好用，也让我第一时间想到了这一个效果：
ctx.fillStyle="red"; ctx.arc(150,150,100,0,360*Math.PI/180,false); ctx.fill(); ctx.globalCompositeOperation="xor"; ctx.beginPath(); ctx.arc(150,150,80,0,360*Math.PI/180,false); ctx.fill();
如果配合前面的扇形方法，很容易做一个圆形进度条什么的，当然，还有很多属性可以有大的作用，比如说裁切一个图形，发挥的发达的大脑吧，这里我就不演示了
3、setLineDash
setLineDash(arr) 在画布上画一条虚线
参数：arr 表示的是一个数组集合，里面的参数可以有多个，这里面的参数很有意思，举个栗子说明：
ctx.beginPath(); ctx.moveTo(0,100); ctx.lineTo(400, 100); ctx.setLineDash([10,20]); ctx.stroke();
对比代码看图，如果有2个参数，则第一个参数表示虚线的线宽，第二个参数表示虚线的线与线的距离，后面一直循环
如果是3个参数呢？
ctx.beginPath(); ctx.moveTo(0,100); ctx.lineTo(400, 100); ctx.setLineDash([10,20,30]); ctx.stroke();
此时会这样，第一条线长为10，然后间距为20，第2条线长为30，然后间距为10，第3条线长20，然后间距为30，到处为一个循环，后面重复
那么4个参数就好理解了，
ctx.beginPath(); ctx.moveTo(0,100); ctx.lineT