JavaScript 画布，获得扁平线条

Question

我正在做一个必须绘制图表的项目。一切都很好，但注意到一个问题，线条显示奇怪..似乎有人用水平握笔画我的图表..当线条下降时一切正常，但是当线条变为水平时，它变得更小。 ..我找不到问题可能是什么.. 请帮忙，因为当需要绘制水平线时我开始得到错误的图表......

这是我的项目的链接： http://www.unolita.lt/images/signalai/Documents/Koreliacine%20funkcija.html

你可以在第一张照片上清楚地看到我的问题..

代码如下：

function drawSignal()
{   
    var canvas = document.getElementById("canvSignal"); 
    if (canvas.getContext) 
    {
        var ctx = canvas.getContext("2d");
            ctx.lineWidth = 3;  
     function Signalas()
        {
   <...>

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.strokeStyle = "black";

   <...>   

    y=250- Sn[n] ;
    ctx.lineTo(x, y);
    ctx.stroke(x, y);

   <...>

把所有代码都放在这里太麻烦了..

Answer 1

这是因为线是在它们所覆盖的所有像素上绘制的（在画布上定位是浮动的）。当您想在画布上使用 javascript 绘制精确的垂直或水平线时，最好将它们设置为半整数。

可能的解决方案：如果您必须绘制一条奇数宽度的线，那么您必须将线的中心向上或向下偏移 0.5。这样，渲染将发生在像素的边界而不是中间，并且您将始终拥有一条清晰的线，在末端边缘没有残留。

因此，奇数线宽加 0.5，这样你的点数应该是一半

ctx.lineTo(x+0.5, y+0.5);
ctx.stroke(x+0.5, y+0.5);

我在第 134 行和第 135 行修改了您的代码，并得到了这样的输出。希望，这会有所帮助

参考这里：

1. incorrect display lineWidth=1 at html5 canvas
2. HTML5 Canvas and Line Width
3. Line Width in Canvas