canvas之绘图

在canvas中插入图片（需要image对象）

			var canvas=document.querySelector("#test")
			if(canvas.getContext){
 				var ctx=canvas.getContext("2d")
				var img=new Image(300,200) //使用Image(w,h)获得图片对象
				img.src="xiongda2.jpg"		//设置图片的src
				img.function(){		//需要等图片加载完成，才能进行操作
					draw()
				}
				function draw(){
					ctx.drawImage(img,10,10,img.width,img.height)	 //drawImage(img,x,y,w,h)
				}				
			}
		

方法	说明
drawImage(img,x,y,width,height)	在画布的（x,y）坐标,长宽（width,height）处绘制img
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)	(sx,sy)是对原图片裁剪的点，(swidth,sheight)是对原图片裁剪的大小

在canvas中设置背景（需要image对象）

1. createPattern(image,repetition) 在指定的方向上重复指定的元素。

					var pat=ctx.createPattern(img,"no-repeat");//设置背景图
					ctx.rect(0,0,500,500);//设置矩形大小
					ctx.fillStyle=pat;//将createPattern返回的函数作为填充样式值
					ctx.fill();

canvas渐变

1. createLinearGradient(x0,y0,x1,y1) 线性渐变起点x0,y0,终点x1,y1。返回渐变对象
2. 渐变对象方法：addColorStop（百分比，color）

					var grad=ctx.createLinearGradient(0,0,500,500);//控制渐变方向
					grad.addColorStop(0,"black");//0%时的渐变颜色
					grad.addColorStop(1,"blue");//100%时的渐变颜色
					ctx.fillStyle=grad; 	//将渐变对象给填充样式
					ctx.rect(0,0,500,500);//设置矩形大小
					ctx.fill();

3. createRadialGradient(x0,y0,r0,x1,y1,r1); 返回放射状/圆形渐变对象。

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);