如何解决JS前端canvas绘图模糊的高清图解问题？

本文共计282个文字，预计阅读时间需要2分钟。

目录：伪原创、边缘模糊的原因

1.canvas 的大小和 CSS 的大小不一致

2.绘制时的边缘不足 1px，会自动补足 1px

3.受到高清晰屏幕的影响，边缘模糊

结语：边缘模糊在 canvas 中是一个经典问题，相信大家也遇到过。

目录

• 缘起
• 模糊的原因
• 1、canvas 的大小和 css 的大小不一致
• 2、当绘制的东西不足 1px，会自动补足 1px
• 3、受到高清屏的影响
• 结语

缘起

模糊在 canvas 中应该算是个经典问题了，相信大家也曾经看过很多相关文章，但总是记不住，因为概念很多，描述的也不够明确，所以我就自己总结了一篇，刨去了复杂概念，顺带画了几张高清图，以此加深理解（我觉得画的贼好