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

使用图片

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

var img = new Image();
img.src="tg.png";
img.onload=function(){
   
	draw();
}
				
function draw(){
   
	ctx.drawImage(img,0,0,img.width,img.height)
}
1
2
3
4
5
6
7
8
9
10
11

设置背景

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

function draw(){
   
	var pattern = ctx.createPattern
1
2