H5学习笔记（五）--canvas图片、背景和绘制文本

使用图片

在canvas中插入图片(需要image对象)
	1.canvas操作图片时，必须要等图片加载完才能操作
	2.drawImage(image, x, y, width, height)
		其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
		这个方法多了2个参数：width 和 height，这两个参数用来控制当canvas画入时应该缩放的大小

var img = new Image();
img.src="tg.png";
img.onload=function(){
   
	draw();
}
				
function draw(){
   
	ctx.drawImage(img,0,0,img.width,img.height)
}

设置背景

在canvas中设置背景(需要image对象)
	1.createPattern(image, repetition)
		image:图像源
		epetition:(平铺)
			"repeat" 
			"repeat-x" 
			"repeat-y" 
			"no-repeat" 		
一般情况下，我们都会将createPattern返回的对象作为fillstyle的值

function draw(){
   
	var pattern = ctx.createPattern(img,"no-repeat")
	ctx.fillStyle=pattern;
	ctx.fillRect(0,0