小程序
小游戏
企业微信
微信支付
扫描小程序码分享
创建createImage().onload 中用drawImage绘制图片如何得知绘制并且渲染完成?绘制是同步的但是渲染应该不是同步的?有没有类似draw中的回调
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
看了很多文档。各种谷歌。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; }; }); };
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
我学识浅薄啊,查阅资料应该是没有提供,但可以使用setTimeout 100可能会绘制不完整需要你考虑时长问题,据我想到的还有一种办法定时通过getImageData 获取最下y点判断是否存在像素值以此来判断是否近绘制完
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
看了很多文档。各种谷歌。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; }; }); };
我学识浅薄啊,查阅资料应该是没有提供,但可以使用setTimeout 100可能会绘制不完整需要你考虑时长问题,据我想到的还有一种办法定时通过getImageData 获取最下y点判断是否存在像素值以此来判断是否近绘制完