javascript - canvas 图片显示问题
本文介绍了javascript - canvas 图片显示问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<canvas id="canvas" width="1000" height="500" style="background:#333"></canvas>
//html代码
var canvas = document.getElementById('canvas'),
cvs = canvas.getContext('2d');
(function motion(){
cvs.clearRect(0,0,canvas.width,canvas.height);//为什么加上这条就无法显示图片了?
img();
console.log(1)
requestAnimationFrame(motion);
})();
function img(){
var Img = new Image();
Img.src = 'https://www.baidu.com/img/bd_logo1.png';
Img.onload = function(){
cvs.drawImage(Img,100,100);
};
};
img();
解决方案
你的这个问题,是代码的问题。
首先,你要明确你的这几行代码的用意:
1. cvs.clearRect(0,0,canvas.width,canvas.height);//canvas橡皮擦功能,擦除canvas上的像素
2. img();//重新给canvas指定渲染的图片,这个
3. console.log(1);//log
4. requestAnimationFrame(motion);//requestAnimationFrame函数会重绘动画,所以motion函数会一直循环执行下去,你可以在控制台看到‘console.log(1)’一直在执行,打印1出来
为什么你加了第一行代码就不显示图片?原因是:
img()函数中的
Img.src = 'https://www.baidu.com/img/bd_logo1.png';
是一个异步的过程因为有第四行代码调用motion,motion会一直执行,clearRect一直在清空canvas上的像素,而img()的异步下载图片还没有下载下来,就被clearRect给擦除掉了。
所以,图片一直显示不出来。
想让图片显示出来,可以把第四行代码去掉,或者把第一行去掉。
参考:
https://developer.mozilla.org...
这篇关于javascript - canvas 图片显示问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文