收藏
回答

canvas 2d 如何得知drawImage 绘制图片并渲染完成?

创建createImage().onload 中用drawImage绘制图片如何得知绘制并且渲染完成?绘制是同步的但是渲染应该不是同步的?有没有类似draw中的回调


回答关注问题邀请回答
收藏

2 个回答

  • 曾洋
    曾洋
    08-19

    看了很多文档。各种谷歌。canvas 2d的 drawImage都说是同步的,可是我怎么执行都感觉是异步的。如下代码,实际上drawImage done显示出来的时候,ctx.drawImage并没有执行完。所以怎么看都是 drawImage执行后,在实际canvas没有绘制完成的时候,console.log就马上就执行了。看似drawImage表现为异步。各位有何高见?

    	const getAndDraw = async (src: string) => {
    		return new Promise(resolve => {
    			const image = canvas.createImage();
    			image.src = src;
    			image.onload = () => {
    				ctx.drawImage(
    					image,
    					toPx(sx),
    					toPx(sy),
    					toPx(sw),
    					toPx(sh),
    					toPx(x),
    					toPx(y),
    					toPx(w),
    					toPx(h),
    				);
    				console.log('drawImage done');
    				resolve;
    			};
    		});
    	};
    
    08-19
    有用
    回复
  • 哄哄
    哄哄
    05-06

    我学识浅薄啊,查阅资料应该是没有提供,但可以使用setTimeout 100可能会绘制不完整需要你考虑时长问题,据我想到的还有一种办法定时通过getImageData 获取最下y点判断是否存在像素值以此来判断是否近绘制完

    05-06
    有用
    回复 1
    • 哄哄
      哄哄
      05-06
      如果你寻找想到好的办法期待你的回复,谢谢
      05-06
      回复
登录 后发表内容