canvas动态绘制图片的方法

应用场景

在制作html5小游戏时需要使用canvas绘制图片，但是图片是异步加载的，需要发送请求获取数据，这就导致不能在设置src之后直接使用绘制方法，而是需要等待图片加载完成。

加载单张图片

1. 使用onload事件
   当图片加载完成后会触发onload事件，在事件处理函数中进行绘制

var img= new Image();
img.onload=function(){
ctx.drawImage(img,100,100,200,300);
}
img.src="test.jpg";

2. 使用异步函数

通过使用异步执行的函数可以在主线程中的程序执行完之后才执行子线程中的程序，相当于onload

var img= new Image();
img.src="test.jpg";
setInterval(function(){
ctx.drawImage(img,100,100,200,300);
},100);

3. 使用promise

imgPro = new Promise((resolve,reject) => {
	var img= new Image();
	img.src="test.jpg";
	img.onload = function (){
		resolve(img)
	}
	img.onerror = function  (e){
		reject(e);
	}
})
imgPro.then(img => {
	ctx.drawImage(img,100,100,200,300);
});

加载多张图片

4. 通过自定义变量判断

在图片绘制时通过一个自定义变量判断图片是否已经加载完毕，如果加载完毕，就进行绘制,这种方法也是使用onload，但可以用于多张图片的绘制判断

var  paint =0;
var img= new Image();
img.onload=function(){
paint+=50;
if(paint===100){
ctx.drawImage(img2,100,100,200,300);
ctx.drawImage(img,100,100,200,300);
}
}
img.src="test.jpg";
var img2= new Image();
img2.onload=function(){
paint+=50;
if(paint===100){
ctx.drawImage(img2,100,100,200,300);
ctx.drawImage(img,100,100,200,300);
}
}
img2.src="testing.jpg";

这种方法不管是哪一张图片后加载都可以将两张图片都会绘制到页面上，并且图片的顺序可以根据自己的需要进行排列。

也可以使用promise加载多张图片

promise.all([new Promise((resolve,reject) => {
	let img = new Image();
	img.src = "test.jpg";
	img.onload = function (){
		resolve(img);
	}
	img.onerror = function(e){
		reject(e);
	}
}),new Promise((resolve,reject) => {
	let img = new Image();
	img.src = "testing.jpg";
	img.onload = function (){
		resolve(img);
	}
	img.onerror = function(e){
		reject(e);
	}
})]).then(imgs => {
ctx.drawImage(imgs[0,100,100,200,300);
ctx.drawImage(imgs[1],100,100,200,300);
})