HTML5之canvas绘制图片

最新推荐文章于 2025-05-17 06:18:40 发布

原创最新推荐文章于 2025-05-17 06:18:40 发布 · 置顶 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #canvas

HTML5 专栏收录该内容

3 篇文章

订阅专栏

在HTML5中使用canvas元素绘制图片时，直接使用Image对象可能会因图片未加载完成导致绘制失败。本文介绍了一种解决方案，通过预加载图片并在加载完成后调用drawImage方法，确保图片成功绘制到canvas上。此方法可以避免浏览器差异，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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);

此种方法是不能够绘制图像的（各浏览器会有差异），其原因在于，我们可能在图片尚未请求或是加载到内存完毕的时候就调用了画图的方法，这是图片尚未加载完毕，当然绘制是不能够成功的。

下面贴出解决的方案。

function preImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;

         if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
             callback.call(img);
             return; // 直接返回，不用再处理onload事件
         }

         img.onload = function () { //图片下载完毕时异步调用callback函数。
             callback.call(img); //将回调函数的this替换为Image对象
         };
     }

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
preImage("../image/default.JPG", function () {
ctx.drawImage(this, 0, 0);
});

此种方式才能够绘制成功。

此种解决方案出自http://apps.hi.baidu.com/share/detail/24712354，这哥们写的挺详细的，我也没细看，大家遇到什么问题可以看看。