画布锯齿线问题答案

【问题标题】：Canvas jagged line issue画布锯齿线问题
【发布时间】：2013-09-17 04:57:38
【问题描述】：

我使用画布构建了一个非常简单的折线图（从谷歌分析中提取数据）。我有几个小问题。首先，情节线是锯齿状的：

我只是为此使用 lineTo：

ctx.lineTo((i*cellWidth) + cellWidth + padding,(tableHeight + padding) - data[i].v);

我已经读到使用样条线可以解决这个问题，但肯定有一种方法可以直接画一条直线吗？

我遇到的其他问题是更改一个属性，例如 strokeStyle 会更改页面上的所有笔划。如何只改变情节线的笔触而不影响网格的外观？

【问题讨论】：

上下文将“记住”所有线条图，直到下一个 context.beginPath。最后定义的上下文样式设置将用于重绘所有记住的行。因此，如果您想更改样式，请将 context.beginPath 放在那些新样式的图纸之前。这对你的锯齿会有一些帮助。你可以将你的情节线加粗到 ctx.lineWidth=3 以帮助更多的锯齿。
谢谢。是的，刚刚意识到我错过了开始路径

【解决方案1】：

~~您是否尝试过更改线路上限？~~

~~cxt.lineCap = 'round';~~

编辑 -

通过添加 ctx.beginPath();在您的 ctx.lineCap 之前，您将获得更好的结果 -

ctx.beginPath();
ctx.lineCap = 'round';

【讨论】：