캔버스에 선 그리기, 마지막 선은 색이 바래다

Question

검은 색 바탕에 흰색 선 그리기를 시도하고 있습니다.

다시 그릴 때까지 아래쪽 3 개의 수평선이 희미 해 보였습니다. 왜 이런 일이 일어나는지 알 수 없습니다. 내가 전에 잘못 본 사람이 있는지, 내가 뭘 잘못하고 있는지 알아?

Answer 1

사실 이는 선이 모든 픽셀 위에 그려지고 있기 때문입니다 (캔버스 위치 지정이 부동 상태 인 경우). 당신이 캔버스에 자바 스크립트에서 정확한 수직 또는 수평 라인을 그릴 때, 당신은 반 int에 그들을 가지고하는 것이 좋습니다.

그림보기 : 첫 번째 수평선은 y 위치 1로 그려졌습니다.이 선은 흐릿하고 넓습니다. 두 번째 수평선은 y 위치가 4.5로 그려졌습니다. 그것은 얇고 정밀합니다. 코드에서 예를 들어

,이에 가로 선 루프를 변경하여 좋은 결과를 가지고 :

   // Horizontal lines 
       for (var i = 1; i < objCanvas.height/intGridWidth; i++) 
       { 
        objContext.strokeStyle = "white"; 
        var y = Math.floor(i*intGridWidth)+0.5 
        objContext.moveTo(0, y); 
        objContext.lineTo(objCanvas.width, y); 
        objContext.stroke(); 
       } 

여기에 매우 얇고 깨끗한 라인을 보여주는 바이올린입니다 :

라인이 끝난 모든 픽셀에 걸쳐 그려지는 것이 유일한 방법입니다. raw 1 픽셀의 폭을 가지는 수평선은 가운데를 타겟으로합니다. 나는 보통 내 캔버스 기반 응용 프로그램에 폴더의 유틸리티 기능의 종류가 : 물론

function drawThinHorizontalLine(c, x1, x2, y) { 
    c.lineWidth = 1; 
    var adaptedY = Math.floor(y)+0.5; 
    c.beginPath(); 
    c.moveTo(x1, adaptedY); 
    c.lineTo(x2, adaptedY); 
    c.stroke(); 
} 

는 당신이 더 좋은 보는 페이지가 너무 수직선을 위해 그것을 할 것입니다.

Answer 2

나를 위해 희미 해 보이지 않습니다. 어쩌면 드로잉을 제대로 렌더링 할 수없는 OS 또는 PC와 관련이있을 수 있습니다. Win 7에서 Chrome 20을 사용하고 있습니다. 테스트 해보세요.

Answer 3

는이 같은 objContext.lineWidth을 정의 할 필요가 : 마지막 줄은 생각 퇴색됩니다 왜

objContext.lineWidth = 2; 

잘 모르겠어요. 참조 http://jsfiddle.net/jSCCY/