javascript - 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. 在 html5 画布上显示 lineWidth=1 不正确
2. HTML5 画布和线宽
3. 画布中的线宽