无法在 canvas 中绘制细线？

Question

我按照教程使用 js 创建了一个 canvas 图。代码绘制是这样的：

function plotData(context, dataSet, sections, xScale) {
    context.lineWidth = 1;
    context.outlineWidth = 0;
    context.strokeWidth = 0;
    context.beginPath();
    context.moveTo(0, dataSet[0]);
    for (i=0; i<sections; i++) {
        context.lineTo(i * xScale, dataSet[i]);
    }
    context.stroke();
}

我正在使用一个数组调用此函数，该数组包含要去哪里的点。x 值是按列计算的 (xScale)，如果我使用 1 个以上的数据源，则生成的图形显示良好。工作正常时的截图：

http://s21.postimg.org/vlc1qg9iv/Screen_Shot_2016_04_08_at_15_48_42.png

但是当我删除最后 2 条数据线并只留下 1 条线时（因此当图表的最大值和最小值之间的差异较小时，它显示如下：

http://s16.postimg.org/ex0fakef9/Screen_Shot_2016_04_08_at_15_44_21.png

在这张截图中你可以清楚地看到，虽然它应该画一条线，但这条线并不是真正的 1px 线而是一个形状，很像一条（严重）扭曲的线？

我不确定是我做错了什么还是我明显忽略了什么？ canvas 的高度是固定的，并且始终使用以下公式计算：

canvas = $('#canvas-container canvas')[0];
canvas.width = $('#canvas-container').width() * 0.9;
canvas.height = $('#canvas-container').width() / 1.45;

谢谢！

具体效果（来自具体教程）的Codepen可以在这里找到：

https://codepen.io/anon/pen/JXMwBy?editors=1111

（注意我注释掉了另外 2 行图形数据，这样做时我使 Val_max 和 Val_min 变量不同于 "stretch" Y 行中的数据)

Answer 1

在此行之后的每个操作中，您都在拉伸 Y 轴：

context.scale(1,-1 * yScale);

相反，删除上面的线并在 plotData() 中绘制线时乘以 y 值。

// multiply all Y values by -yScale to flip and scale
context.moveTo(0, dataSet[0] * -yScale);
for (i=1;i<sections;i++) {
    context.lineTo(i * xScale, dataSet[i] * -yScale);
}

无法在 canvas 中绘制细线？

Cannot draw thin line in canvas?

javascript

canvas

graph

line