JavaScript холст, получая плоские линии

Question

Я работаю над проектом, который должен рисовать графики. Все довольно хорошо, но заметил одну проблему, линии показывают странно... кажется, что кто-то рисует мой график с кистью, держащей горизонтально... когда линия опускается, все в порядке, но когда линия идет горизонтально, она становится намного меньше... Я не могу найти, в чем может быть проблема.. Пожалуйста, помогите, потому что я начал получать неправильные графики, когда нужно нарисовать горизонтальную линию...

Вот ссылка на мой проект: http://www.unolita.lt/images/signalai/Documents/Koreliacine%20funkcija.html

Вы можете ясно увидеть мою проблему на 1-й картинке..

Вот это код:

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. неправильное отображение lineWidth=1 на холсте html5
2. HTML5 Canvas и Line Width
3. Ширина линии в холсте