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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>),好了下面开始说正事:


温馨提示:点击此处查看此问题在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有很多的理解。

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

###

理论上 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 像素的宽高。

郑重声明:本站部分内容转载自网络,版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(QQ/微信153890879)修改或删除,多谢。