关于canvas2D绘图出现锯齿现象的解决方案探讨或心得交流

Question

温馨提示：点击此处查看此问题在image2D issue中的讨论。

问题说明

在我日常开发的时候（主要是维护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有很多的理解。

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

Answer 1

理论上 canvas 本身的 width 和 height 决定了清晰度。想要绝对清晰的话，可以使用 devicePixelRatio 去进行缩放。

上面的代码可以修改成

canvas.style.width = width + "px";
canvas.style.height = height + "px";

canvas.width = window.devicePixelRatio * width;
canvas.height = window.devicePixelRatio * width;

painter.scale(2, 2);

在部分机器上会有 canvas 像素过高而导致性能和发热问题，可以限制 canvas 像素的宽高。