javascript - 画布锯齿线问题

Question

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

http://jsfiddle.net/uJQ7K/

我只是为此使用 lineTo ：

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

我读过使用样条线可以解决这个问题，但肯定有一种方法可以开箱即用地画一条直线？

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

Answer 1

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

cxt.lineCap = '圆形';

编辑 -

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

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

http://jsfiddle.net/uJQ7K/1/