问题：canvas绘制图片，图片变模糊
单方面的去修改图片精度，换成更高清的图片，事实证明确实有一丢丢用，但是效果不是很明显。况且我当时那个图片由于是手绘的，大小有5M，也不会切片加载图片，直接整个加载非常耗时。
那么如何去处理这样的问题呢？
- 生活中应该大家都遇到过这样的情况，同样的1080p的视频，在大屏显示器上看和手机上看效果是不一样的，大屏往往会让人感觉一种模糊感。而在手机小屏幕上，就会感觉异常的清晰。
要点：两个点
- 通过上面的一个例子，我们可以将图片放大，然后再绘制进原先大小的canvas中，这样图片的精度受损会比较小
- 了解canvas的绘制原理（*打星号）
canvas其实就是一张画布，所以如果可以的话，你可以将它放大，可以发现它也是有一个个的像素组成的。
他会以图中的红线作为中线，向两边延伸，从而得到1px的纵向线条。但是像素是不允许0.5px的出现的，所以它索性就直接再延伸一点，将像素给填满。所以你看到的效果是下面这种?
解决方案
方法一
在绘制的时候，如果是线条，可以通过移动0.5px找准中线来达到目的，例如：
ctx.moveTo(100.5,100.5); ctx.lineTo(200.5,100.5); 方法二
如果是图片，可以通过放大一倍canvas大小，但是通过css保持canvas大小不变，然后再绘制进canvas中，这样在canvas放大一倍的情况下绘制进去图片，然后通过css缩小canvas到原来大小达到目的。
示例
canvas绘制图片模糊
为了方便，就都写在一个html中了，图片也是找的网图。左边是未处理，也就是代码中的canvas效果，右边是通过方法2处理后的，也就是canvas2效果，请自行鉴别嗷。
方法三
可以通过 transform:scale(0.5)的方式对图片进行缩放，再绘制到canvas中
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/216886.html原文链接：https://javaforall.net
