캔버스가 유령 반지를 벗어나는 이유는 무엇입니까?

Question

저는 Canvas를 실험하고, 격자에 다른 색상의 토큰을 배치하고,이를 제거하려고합니다.

현재 토큰에 흰색과 동일한 크기의 원을 그려서 토큰을 제거하려고합니다. 이것은 원본 원이 있던 "유령 반지"(단일 픽셀 윤곽선)를 남기고 있습니다. 원 윤곽은 흰색 원을 연속적으로 적용하면 사라집니다.

2 원

는 원래 그린 -1, 전혀 이징되지 않는다. 3의 원, -1은 한 번, 4는 원, -1은 두 번 overpainted, 7은 -1로 overpainted되었습니다.

이 문제는 Chrome과 Firefox 3.6 모두에서 발생합니다.

내 코드는 다음과 같습니다.

function placeToken(e) { 
     var click = getClick(e); 

     var gridCord = getGridCord(click); 

     var canvas = e.currentTarget; 
     var ctx = canvas.getContext(CONTEXT_NAME); 

     ctx.fillStyle = color; 
     ctx.strokeStyle = color; //tried with and without this line, no effect 

     x = (gridCord.x * spacing) + (spacing/2); 
     y = (gridCord.y * spacing) + (spacing/2); 


     ctx.beginPath(); 
     ctx.arc(x, y, (spacing - tokenEdge)/2, 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.stroke(); //tried with and without this line. Same result 
    }; 

캔버스가이 유령 반지를 벗어나는 이유는 무엇이며 어떻게 제거 할 수 있습니까?

Answer 1

즉, 안티 앨리어싱입니다. 그 원의 가장자리에있는 픽셀은 100 % 미만의 불투명도로 페인트됩니다. 이것은 캔버스에 고유하지 않습니다. 이전에 Windows 그래픽 API가 앤티 앨리어싱을 수행하기 전에 작성 및 테스트 된 Windows 응용 프로그램은 앤티 엘리 어싱을 수행 한 Windows 버전에서 실행될 때 유령 경계를 벗어납니다.

완전히 불투명 한 흰색 직사각형을 페인트하면됩니다. 직사각형은 곡선 테두리가 없으므로 모든 픽셀이 흰색 페인트 또는 영향을받지 않습니다. 즉, 앤티 엘리 어싱을하지 않습니다.

Answer 2

더 낮은 해상도에서 고해상도 이미지를 나타낼 때 앨리어싱으로 알려진 왜곡 인공물을 최소화하는 기술입니다 (anti-aliasing). 그려 질 때까지 원이 고해상도이므로 이러한 출혈 효과를 얻습니다.

Answer 3

저는 캔버스를 많이 망쳐 놓은 적이 없지만 포토샵에서와 같은 이유로 문제가 발생한다고 생각합니다.

원을 그릴 때 톱니 모양의 가장자리가 보이지 않도록하려면 앤티 앨리어싱을 적용해야합니다. 즉, 부드럽게하기 위해 다양한 각도로 반투명 한 원의 모든 픽셀로 끝납니다.

동일한 위치와 크기를 사용하여 원 위에 페인트하면 기본적으로 반투명 픽셀을 이미 반투명 픽셀 위에 페인트하여 원래 색상에 가까운 픽셀 링을 남깁니다 (약간 더 가벼운). 그래서 하얀색 원을 더 많이 칠할수록 완전히 하얀색 블록에 가까워집니다.