目录
问题：canvas绘制图片，图片变模糊那么如何去处理这样的问题呢？要点：两个点解决方案方法一方法二方法三问题：canvas绘制图片，图片变模糊
设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。以有几种不同的解决方案。
解决方案
方法一
在绘制的时候，如果是线条，可以通过移动0.5px找准中线来达到目的，例如：
ctx.moveTo(100.5,100.5);ctx.lineTo(200.5,100.5);
方法二
如果是图片，可以通过放大一倍canvas大小，但是通过css保持canvas大小不变，然后再绘制进canvas中，这样在canvas放大一倍的情况下绘制进去图片，然后通过css缩小canvas到原来大小达到目的。
示例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=dewww.easck.comvice-width, initial-scale=1.0" /> <title>canvas绘制图片模糊</title> </head> <body> <img id="img" src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/09/0C/Cg-4WVV6jWmIczjzAAdzu1eYHzwAAFK1wD9poMAB3PT053.jpg" width="100px" height="100px" style="visibility: hidden;" /> <canvas id="canvas" width="400px" height="400px"></canvas> <canvas id="canvas2" width="800px" height="800px" style="width: 400px; height: 400px;" ></canvas> </body> <script> function init() { console.log(1234); let canvas = document.getElementById("canvas"); let img = document.getElementBwww.easck.comyId("img"); let context = canvas.getContext("2d"); context.drawImage(img, 0, 0, 400, 400); let canvas2 = document.getElementById("canvas2"); let context2 = canvas2.getContext("2d"); context2.drawImage(img, 0, 0, 800, 800); } window.onload = init; </script></html> 为了方便，就都写在一个html中了，图片也是找的网图。左边是未处理，也就是代码中的canvas效果，右边是通过方法2处理后的，也就是canvas2效果，请自行鉴别嗷。
方法三
可以通过 transform:scale(0.5)的方式对图片进行缩放，再绘制到canvas中
以上就是面试中canvas绘制图片模糊图片问题处理的详细内容，更多关于面试canvas绘制图片模糊解决的资料请关注我们其它相关文章！
