canvas 图片放大后模糊问题

1,有一张115X34的图片:

clipboard.png

用canvas画出来之后,如果canva的宽高不小于115X34的话,图片不会放大。

ctx.drawImage(img, 0, 0);

如果用ctx.scale(5,5);,或者在drawImage的时候指定宽高(比较大的值),图会变大,
同时问题也来了:图会变模糊。

clipboard.png

而如果不放大,让它原图(115X34)显示,再用浏览器自带的放大功能,那么是这样的:

clipboard.png

clipboard.png

其中有css

canvas {
        image-rendering: pixelated;
  }

这是预期的效果。
有没有办法用canvas实现类似效果?
非伸手党,告知相关的api、方法或给出链接即可,谢谢。

阅读 9.5k
3 个回答

canvas中画图会按你最开始drawimage时候的大小来缩放,所以你想放大时候不模糊,要一开始按很大的尺寸来drawimage,再按照你的需求缩小,还不是现在你反过来做。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题