자바 스크립트 캔버스, 평면도보기

Question

그래프를 그려야하는 프로젝트에서 작업 중입니다. 모든 것이 꽤 좋지만 하나의 문제를 발견했습니다. 선들이 이상하게 보입니다. 누군가가 내 그래프를 수평으로 잡고 브러쉬로 그려주는 것처럼 보입니다. 선이 모두 아래로 내려 가면 선이 수평으로 바뀌면 훨씬 작아집니다. http://www.unolita.lt/images/signalai/Documents/Koreliacine%20funkcija.html

.. 내가 여기

내 프로젝트에 대한 링크입니다 ... 나는 그것이 수평 라인을 그릴 필요가있을 때 잘못된 그래프를 얻을 시작했기 때문에 문제가, 도와주세요 .. 수 무엇을 찾을 수 없습니다 당신은 분명히 첫번째 사진에 내 문제를 볼 수 있습니다

.. 여기

는 코드입니다입니다 :

,536

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

사실 라인들이 이상있어 모든 픽셀을 통해 그려에이 때문이다 .. 여기에 모든 코드를 넣어 너무 많은 문제 하였다 (캔버스으로 위치에 부동이다). 당신이 캔버스에 자바 스크립트에서 정확한 수직 또는 수평 라인을 그릴 때, 당신은 반 int에 그들을 가지고하는 것이 좋습니다.

가능한 해결책 : 홀수 번호의 너비로 선을 그려야하는 경우 선의 중심을 0.5 위나 아래로 오프셋해야합니다. 그런 식으로 렌더링이 픽셀의 경계에서 일어나고 가운데가 아니라, 가장자리 가장자리에 잔유가없는 선이 항상 생깁니다. 당신의 포인트가 절반 나는 줄 번호 (134)이 같은 코드를 수정 135이 같은 출력을 가지고있다

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

번호가되어야 있도록

그래서 홀수 라인 폭 0.5을 추가합니다. .. 당신을

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