canvas绘制折线产生锯齿1px模糊？

Question

我百度过，一般解决方案便是放大缩小或者添加 0.5px 但是始终没有解决。
🔗 K线图 这是复现例子。

我曾尝试过:

• 关于canvas绘制1像素出现模糊的原因及解决方法
• 关于canvas2D绘图出现锯齿现象的解决方案探讨或心得交流

等相关例子，但是始终没有解决 不知道如何解决折现模糊问题

Answer 1

const ctx = canvas.getContext('2d');
ctx!.translate(0.5, 0.5);

Answer 2

一种高清化方案，canvas 的元素宽高假如为 400,300.
在 canvas 内部尺寸设置为 800,600. 画线宽度为 2。

Answer 3

我记得好像哪一篇文章讲过，
将图形旋转 1deg,
旋转能对抗锯齿？

尝试了一下，
2倍放大情况下 1deg 效果不明显
1倍标准情况下 1deg 效果不错，就是旋转比较大，改为 0.1 还行
捂脸... （*/—*）

Answer 4

这个需要根据你的设备DPI和设备分辨率来的， 比如你的设备是 375 667 DPI为2，画布全屏显示。那么你应该把画布的大小设为750 & 1334。然后用css将画布显示大小设置为 375 667 这样两个物理像素显示一个逻辑像素，可以达到高清显示的效果

Answer 5

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/T...

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/T...

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/T...

看下MDN对canvas 的 像素的解释,不知道能不能帮到你

可以关闭反锯齿试下呢