在HTML5中使用canvas元素绘制图片时，直接使用Image对象可能会因图片未加载完成导致绘制失败。本文介绍了一种解决方案，通过预加载图片并在加载完成后调用drawImage方法，确保图片成功绘制到canvas上。此方法可以避免浏览器差异，提高用户体验。
在使用HTML的canvas显示图片时，我才发觉情况没我想法的那么简单，我原先的代码是这样子的，
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var pl = new Image();
pl.src = "../image/default.JPG";
ctx.drawImage(pl, 0, 0);
var ctx = canvas.getContext('2d');
var pl = new Image();
pl.src = "../image/default.JPG";
ctx.drawImage(pl, 0, 0);
此种方法是不能够绘制图像的（各浏览器会有差异），其原因在于，我们可能在图片尚未请求或是加载到内存完毕的时候就调用了画图的方法，这是图片尚
最低0.47元/天 解锁文章
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
