h5-canvas（其他api）

###1.使用图片（需要image对象）

　　drawImage(image,x,y,width,height)

　　　　其中image是image或者canvas对象，x和y 是其在目标canvas的起始坐标

　　　　　　width和height指控制该image或canvas对象画入画布的大小

　　　eg：

　　　　　　var img = new Image（）；

　　　　　　img.src = "xxx.png";

　　　　　　img.onload = function(){　　draw();　  //建议该函数内部的代码抽取为外部函数调用　};

　　　　　　function draw(){

　　　　　　　　ctx.drawImage(img,100,100,150,150);

　　　　　　}

###2.设置背景（需要image对象）

　　createPattern(image,repetition)　　

　　　　image: 图像源

　　　　repetition:      指定如何重复图像。

　　　　　　"repeat"       "repeate-x/y"    "no-repeat"

　　　　eg：

　　　　　　var img = new Image();

　　　　　　img.src = "xxx.png";

　　　　　　img.onload = function(){

　　　　　　　　var pattern = ctx.createPattern(img,"repeat");

　　　　　　　　ctx.fillStyle = pattern;

　　　　　　　　ctx.fillRect(0,0,400,400);

　　　　　　}

###3.渐变

　　3.1) 线性渐变  createLinearGradient(x1,y1,x2,y2)         该方法返回一个对象,该对象含有一个addColorStop(position, color)方法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　position: 参数必须是一个0.0与1.0之间的数值，表示渐变中的颜色所在的相对位置

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　例如0.5表示颜色会在正中间开始渐变

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　eg: gradient.addColorStop(0,"red");　　gradient.addColorStop(0.5,"yellow")　　gradient.addColorStop(1,"green")

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　红-----黄-----绿    依次渐变

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　color 参数为一个有效的css颜色值

　　　　参数为渐变的起点(x1,y1)与终点(x2,y2)

　　　　eg：         　　var  gradient = ctx.createLinearGradient(0,0,150,150);

　　　　　　　　　　　gradient.addColorStop(0.5, #eee)

　　3.2） 径向渐变　createRadialGradient(x1,y1,r1,x2,y2,r2)

　　　　　　　　三个参数定义一个以（x1/2,y1/2）为圆点半径为r1/2的圆　

###4. 使用文本

　　fillText（text , x,y）　　指定的x，y位置填充指定文本

　　strokeText(text,x,y)       在指定的x，y位置绘制文本边框

　　4.1)文本样式

　　　　font = value 　　  与css font属性相同的语法   只支持一种字体 sans-serif          eg:  ctx.font = “20px  sans-serif”   必须有大小和字体

　　　　textAlign = value    文本对齐选项      left 、right  、center

　　　　textBaseline = value     指定当前文本基线      top、middle中间（）、bottom

　　　　.....等