canvas中使用图片

canvas中插入图片

1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)

其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小

代码示例：

window.onload=function(){
	var canvas = document.querySelector("#test");
	if(canvas.getContext){
		var ctx = canvas.getContext("2d");
		var img = new Image();
		img.src="tg.png";
		img.onload=function(){ //需要图片加载完之后才能使用图片
			draw();
		}
		function draw(){
			ctx.drawImage(img,0,0,img.width,img.height)
		}	
	}
}

canvas中设置背景

1.createPattern(image, repetition)
image:图像源
epetition:
		"repeat" 
		"repeat-x" 
		"repeat-y" 
		"no-repeat" 

一般情况下，我们都会将createPattern返回的对象作为fillstyle的值；

代码示例