美文网首页
canvas drawImage初次加载以及加载完成后事件

canvas drawImage初次加载以及加载完成后事件

作者: cuiyaoqiang | 来源:发表于2018-12-13 17:14 被阅读0次

    直接调用canvas的 drawImage()方法首次加载时图片不显示,解决方案是在Img.onload()方法中绘制图。但是如果以后需要不断的绘制该图片的时候就会一直调用onload事件,出现图片一闪一闪的现象,解决方案是根据Img.complete()方法判断图片是否加载完成。如下:

    var devBgImg = new Image();

                devBgImg.src =this.imgUrl;

                var imgX=this.coodinate.x;

                var imgY=this.coodinate.y+10;

                var imgWidth=this.width;

                var imgHeight=this.height-10;

                if(devBgImg.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 

                    context.drawImage(devBgImg,imgX,imgY,imgWidth,imgHeight);

                    return; // 直接返回,不用再处理onload事件 

                } 

                devBgImg.onload=function(){

                    context.drawImage(devBgImg,imgX,imgY,imgWidth,imgHeight);

                };

    相关文章

      网友评论

          本文标题:canvas drawImage初次加载以及加载完成后事件

          本文链接:https://www.haomeiwen.com/subject/xgubhqtx.html