HTML5画布行中的可变线宽

我想为这篇文章投稿， 但是它被删除了，因为它不是一个正式的答案，因为从技术上来说，我也在用下面的代码问一个问题，我得到了同样的问题。 “我在画布上画线条图。线条画得很好。图形是按比例缩放的，每个部分都画好了，颜色还可以，等等。我唯一的问题是从视觉上看，线条的宽度不同。这几乎就像是一支书写笔的笔尖。如果笔划向上，线条就会变细，如果笔划水平，线条就会变粗

我的线条粗细是恒定的，我的笔划样式设置为黑色。我没有看到画布的任何其他属性会影响如此变化的线条宽度，但肯定有。 "

html{font-family:Verdana；}
var帆布；
var语境；
var Val_max；
var Val_min；
var切片；
var-xScale；
var-yScale；
var三星=[21000200023000200023000200023000]；
函数init（）{
//为数据设置这些值
截面=7；
Val_max=25000；
Val_min=10000；
var步长=1500；
var-columnSize=75；
var rowSize=75；
var保证金=10；
var xAxis=[”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]/；
//
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
context.fillStyle=“#4d”
context.font=“10 pt Arial”
yScale=（canvas.height-columnSize-margin）/（Val_max-Val_min）；
xScale=（canvas.width-rowSize）/节；
context.strokeStyle=“#4d”//网格线的颜色
context.beginPath（）；
//在X轴上打印参数，并在图形上打印网格线
用于（i=1；i=Val_min；比例=比例-步长）{
变量y=columnSize+（yScale*count*步长）；
填充文本（比例、边距、y+边距）；
context.moveTo（行大小，y）
context.lineTo（canvas.width，y）
计数++；
}
stroke（）；
上下文。线宽=20；
context.translate（行大小，canvas.height+Val_min*yScale）；
上下文。比例（1，-1*yScale）；
//每个数据绘图项的颜色
context.strokeStyle=“#2FBC3A”；
plotData（三星）；
}
函数plotData（数据集）{
//context.beginPath（）；
//moveTo（0，数据集[0]）；
//对于（i=1；i您正在以非统一的方式更改上下文的比例。

因此，此操作后的所有图形将在Y轴上收缩

为了避免这种情况，仅在绘制坐标时，即

context.scale(1, -1 * yScale);
...
context.lineTo(x, y);

变成

context.lineTo(x, y * -1 * yScale);

这样，坐标将正确缩放，但笔划将保持正确的缩放

另外，您单独绘制每个线段，这会在每个线段之间产生一些孔，因此我冒昧地将它们合并到一个子路径中


var画布；
var语境；
var Val_max；
var Val_min；
var切片；
var-xScale；
var-yScale；
var Samsung=[21000,21000,23000,22000,22000,23000,23000]；
函数init（）{
//为数据设置这些值
截面=7；
Val_max=25000；
Val_min=10000；
var-columnSize=75；
var rowSize=75；
var保证金=10；
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
context.fillStyle=“#4d”；
yScale=（canvas.height-columnSize-margin）/（Val_max-Val_min）；
xScale=（canvas.width-rowSize）/节；
context.lineWidth=20；
context.translate（行大小，canvas.height+Val_min*yScale）；
//上下文。比例（1，-1*yScale）；
//^--不要那样做。
context.strokeStyle=“#2FBC3A”；
plotData（三星）；
}
函数plotData（数据集）{
var-love=0；
//从所有线段创建一条路径
context.beginPath（）；
对于（变量i=0；i