帆布锯齿线问题

Question

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

http://jsfiddle.net/uJQ7K/

我只是使用lineTo：

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

我已经读过使用样条曲线可以解决这个问题，但肯定有办法从框中画出一条直线？

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

Answer 1

您是否尝试更改过线帽？

cxt.lineCap ='round';

编辑 -

添加ctx.beginPath（）;在你的ctx.lineCap之前，你会得到更好的结果 -

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

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