glide加载图片闪烁_html5 canvas绘制图片-技術動態-匯編語言學習筆記

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

2023-09-19 阅读 23 评论 0

摘要：举两个新手（我）比较容易范的错误js canvas荧光字效果，1、图片声明了，绘制方法也ok了，但是有的时候就可以显示出来，有的时候就显示不出来function draw(){var c=document.getElementById("myCanvas");var ctx=c.getContex

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

js 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刷新、原因是，图片虽然声明了，但是在它加载之前你就使用了，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);} 
}

效果如下：

html5canvas输出，那么问题来了：可不可能图片在你声明之前已经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，但是这段代码图片是可以绘制出来的

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

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

csscanvas如何使用、由于录制帧率问题，可以大概看到是有闪烁的，所以很多同学会上网搜索怎么解决，大部分的解决方案是告诉你弄两个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();

效果如下：