glide加载图片闪烁_html5 canvas绘制图片

举两个新手（我）比较容易范的错误

1、图片声明了，绘制方法也ok了，但是有的时候就可以显示出来，有的时候就显示不出来

function draw(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var img=new Image();
	img.src = "https://www.runoob.com/try/demo_source/img_the_scream.jpg";
	ctx.drawImage(img,10,10);
}

如上的写法效果如下：

原因是，图片虽然声明了，但是在它加载之前你就使用了，canvas可不会等加载资源之后再次帮你绘制，所以需要增加onload方法。

function draw(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var img=new Image();
	img.src = "https://www.runoob.com/try/demo_source/img_the_scream.jpg";
	img.onload = function() {
	ctx.drawImage(img,10,10);
	} 
}

效果如下：

那么问题来了：可不可能图片在你声明之前已经load过了呢？答案是可能的，看下面这一段代码

function draw(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var img=new Image();
	img.src = "https://www.runoob.com/try/demo_source/img_the_scream.jpg";
	img.onload = function() {
		var img2=new Image();
		img2.src = "https://www.runoob.com/try/demo_source/img_the_scream.jpg";
		ctx.drawImage(img2,10,10);
	} 
}

虽然我画的是刚声明出来的img2，但是这段代码图片是可以绘制出来的

所以说，是有可能出现这样的情况的，在不了解onload机制的时候会发现有的图片能加载出来有的不能加载出来（这种现象在一些框架下尤为明显，一些框架图片管理机制就是这么玩的）

2、我的canvas里面有一些图片，但是每次重绘图片都会闪烁一下，非常难看

由于录制帧率问题，可以大概看到是有闪烁的，所以很多同学会上网搜索怎么解决，大部分的解决方案是告诉你弄两个canvas互相替换，其实对于这么简单的图片绘制，加之以当前的计算机处理速度，问题并不是出在绘制上，我们发现，其实是有个onload在作祟，每次他都要等这个图片请求完成之后在绘制，这才是canvas绘制图片闪烁的真正原因！为了证明我们的想法，我来编写如下代码：

let img=new Image();
img.src = "https://www.runoob.com/try/demo_source/img_the_scream.jpg";
let ready = false;
function draw(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	
	if(ready){
		ctx.drawImage(img,10,10);
	}else{
		img.onload = function() {
			ready = true;
			ctx.drawImage(img,10,10);
		} 
	}
	
}
	
function replay(){
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
    cxt.clearRect(0,0,c.width,c.height);  
	draw();
}
draw();

效果如下：

这样就行云流水顺畅多了，不相信的同学可以带着代码去亲自尝试一下。学而不思则罔，思而不学则殆。计算机领域会有很多很多的想当然，我们会以我们的认知来解释一些我们想当然的事情，但是不亲自去证明他，我们可能就会失去一次很好的成长的机会。