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