美文网首页
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初次加载以及加载完成后事件

    直接调用canvas的 drawImage()方法首次加载时图片不显示,解决方案是在Img.onload()方法中...

  • canvas 多张图片绘制层级问题

    //canvas图片绘制/*** 1.必须等图片加载完成后才能使用drawImage方法* 2.Image默认不支...

  • 微信小程序中canvas.drawImage画图

    描述:在页面加载是使用canvas.drawImage画图,点击页面下面按钮在已绘制好的图形上继续画图。使用ctx...

  • 事件(下)

    事件类型 UI事件 load:当页面完全加载后在window上面触发,当所有框架加载完成后在框架集上触发,图像加载...

  • html2canvas实战

    对于不想细看canvas的童鞋,用html2canvas还是很方便哒~ 海报内的内容加载完成后执行下面方法: 有时...

  • canvas绘制图片

    绘制图片,要求图片必须在加载完成之后。drawImage(img,x,y)图片有多大绘制多大;drawImage(...

  • iOS: 浏览UIWebView中的图片

    1.加载UIWebView 2.UIWebView加载完成后,注入JS代码,让所有的图片都有超链接事件 funcw...

  • 移动开发tips

    click事件300ms延迟 使用canvas代替img标签加载图片:使用canvas 和img标签渲染图片的区别...

  • 加载图片数据,以及设置开放域画布的宽高

    作者: 何永峰;标签: 微信小游戏,开放域 加载图片数据,以及初步绘制canvas 加载图片数据 之前我们有提到...

  • 图片加载事件

    最近有一个在页面中的图片加载完成后执行某些操作的需求,那么应该如何判断页面中的图片是否加载完成呢? 图片加载事件 ...

网友评论

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

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