不能在画布上画细线？答案

【问题标题】：Cannot draw thin line in canvas?不能在画布上画细线？
【发布时间】：2016-07-29 21:40:43
【问题描述】：

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

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-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 变量与“拉伸”Y 线中的数据不同）

【问题讨论】：

不要使用 CSS 来缩放画布。相反，直接缩放画布元素：canvasElement.width=something; canvasElement.height=something;
我希望是这样的。但是，我的代码看起来像是在编辑画布元素而不是它的 css？除非我完全感到困惑:)（编辑我的代码以显示）
要考虑的另一件事是两个屏幕截图看起来相同，除了线条...如果只是拉伸所有像素的问题，那么图形的其余部分不会受到影响吗？
是的，我也注意到了这种差异，好的，我会重新提出这个问题，因为你会为我们提供一个最小（行为不端）的例子。 :-)
谢谢！我添加了一个 codepen 链接。

标签： javascript canvas graph line

【解决方案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);
}

【讨论】：