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. incorrect display lineWidth=1 at html5 canvas
2. HTML5 Canvas and Line Width
3. Line Width in Canvas