问题说明

在我日常开发的时候（主要是维护image2D），绘制的图形边界有时候会存在模糊现象，想到了一些原因和解决方案，但没有一个完全满意的，因此在这里列出个人想到的原因和解决方案和大家交流。

模糊原因

模糊的原因我想到了二种：

• 第一种是绘图方法上；
• 第二种是画布自身原因，比如著名的1px问题。

解决方案

针对第一种，是绘图策略问题(查看例子)，我们这里主要讨论第二种。

第二种我们需要举个例子，比如你绘制1px的线条（不知道这个的可以先百度再回来，这里不赘述了），可以偏移0.5px来实现，不过实践起来，其实只能解决这一类特殊问题，对于我们这里的锯齿好像并不行。

不过，由此得到了一个启发，我试着使用缩放2倍画布再缩小2倍的方式绘图，我是把svg、优化前和优化后放在一起进行了对比，效果基本良好（查看例子），不过和svg矢图相比，依旧有很明显的模糊。

// 设置显示大小
    canvas.style.width = width + "px";
    canvas.style.height = height + "px";

    // 设置画布大小（画布大小设置为显示的二倍，使得显示的时候更加清晰）
    canvas.setAttribute('width', width * 2);
    canvas.setAttribute('height', height * 2);

    // 通过缩放实现模糊问题
    painter.scale(2, 2);

写在最后

提出这个问题的原因是希望和大家讨论并解决这个缺陷，同时对canvas2D有很多的理解。

上面有任何错误欢迎指出。