HTML 5 캔버스 : 선 가장자리에서 색 그라디언트를 제거하십시오.

흰색 채워진 캔버스에 검은 선을 그리려합니다. 몇 가지 이유 때문에 그 라인의 내부 픽셀 (lineWidth = 3)만이 실제로 검은 색입니다. 선의 가장자리로 가면 갈수록 회색 계단의 계단이 보입니다. lineWith = 1로 그릴 경우 픽셀은 실제로 검정색이 아닙니다.HTML 5 캔버스 : 선 가장자리에서 색 그라디언트를 제거하십시오.

<html> 

<head> 
<script type="text/javascript"> 
function page_loaded() 
{ 
    var cv = document.getElementById("cv"); 
    var ctx = cv.getContext("2d"); 
    ctx.fillStyle = "#ffffff"; 
    ctx.strokeStyle = "#000000"; 
    ctx.lineWidth = 3; 
    ctx.lineCap = "round"; 
    ctx.lineJoin = "bevel"; 
    ctx.fillRect(0, 0, cv.width, cv.height); 
    ctx.moveTo(5, 5); 
    ctx.lineTo(10, 10); 
    ctx.stroke(); 
    var imgdata = ctx.getImageData(0, 0, cv.width, cv.height); 
    for (var y = 0; y < cv.height; y ++) 
    { 
    for (var x = 0; x < cv.width; x ++) 
    { 
     var idx = 4 * (y * cv.width + x); 
     var c = imgdata.data[idx]<<16 | imgdata.data[idx+1]<<8 | imgdata.data[idx+2]; 
     if (c != 0xffffff) 
     { 
     document.getElementById("debug").innerHTML += x+"x, "+y+"y: "+c.toString(16)+"<br/>"; 
     } 
    } 
    } 
} 
</script> 
</head> 

<body onload="page_loaded()"> 
<p> 
<canvas id="cv" width="15" height="15"></canvas> 
</p> 
<p> 
Found colors: 
<div id="debug"></div> 
</body> 

</html>

이되지 않는 이유는 라인이 검게 어떻게 내가이 문제를 해결할 수 있습니다 : http://jsfiddle.net/xr5az/

그냥 완성도를 위해, 여기에 다시 코드는 다음과 같습니다

나는 무슨의 작은 데모를 썼다 ?

고맙습니다.

출처

2013-10-20 Robert

그래서이 코드는 행의 anti-alisaing과 관련이 있다고 주장 할 수 있습니다. 'lineWidth'를 단지 1로 변경하면 발견 된 유일한 색은 검은 색이므로 도움이 될 수도 있습니다 : http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html -canvas-element –

@AhmedNuaman - 오히려 오래된 문서입니다. 최근 답변을 찾았습니다. http://stackoverflow.com/questions/4261090/html5-canvas-and-anti-aliasing. JS 디버거의 "Watches"목록 (getContext ('2d')에 의해 얻음)에서 캔버스의 컨텍스트를 보면, imageSmoothingEnabled 플래그와 webkitImageSmoothingEnabled 플래그를 볼 수 있습니다. 이전에 거짓을 설정하면 후자에도 적용됩니다. 그러나 어느 것도 공급 된 바이올린에 영향을 미치지 않습니다. – enhzflep

@AhmedNuaman : lineWith를 1로 설정하면 4x, 4y와 같은 색상을 얻습니다. fbfbfb; 5x, 4y : d0d0d0; 4x, 5y : c4c4c4; 5x, 5y : 151515; 6x, 5y : a7a7a7 예를 들면 Firefox에서. – Robert

세로 또는 가로로 그리기하고 0.5 (jsfiddle.net/xr5az/2/)를 추가하면 흑백 만 나타납니다. (나는 처음부터 끝까지 선을 비췄다는 것을 알 수있다. 회색 일 것이다 ...)

ctx.moveTo (-2, 5.5); ctx.lineTo (17, 5.5); ctx.stroke();
각도를 추가하면 시스템이 여분의 회색 색상 픽셀을 추가합니다.
검은 색에서만 선을 가져 오려면 선의 시작점과 종점 사이에 많은 개별 픽셀 (또는 lineWidth> 1을 원할 경우 정사각형)을 그립니다.

p.s. 깨진 바이올린 링크를 사용해 죄송합니다. 코드가 10 번 포함 된 상태에서도 시스템에서 내 메시지를 전송했습니다 ...

출처

2013-10-20 14:21:29 ViliusL

그래, 선의 그라디언트 때문에 정말 ... 글쎄, 선을 따라 검은 사각형을 추가하는 것은 다소 비효율적이므로 픽셀 단위로 완전히 작업하기로 결정했습니다. 수평. 그러나 모든 브라우저가 다르게 작동하는 것을 보는 것은 상당히 실망 스럽습니다. 날카로운 모서리 선을 원시 픽셀 수준으로 강제로 생성 할 수 없다는 것은 유감입니다. 당신의 설명에 감사드립니다! – Robert

HTML 5 캔버스 : 선 가장자리에서 색 그라디언트를 제거하십시오.

답변

관련 문제