HTML5 Canvas - 대상 없음 컴포지션 문제

Question

캔버스에 일부 커브를 그립니다. 커브가 완료된 후에는 드로잉의 일부분을 실행 취소해야합니다 (커브의 처음 75 % 만 필요하므로 커브의 마지막 25 %를 삭제해야합니다).

다음은 내 곡선이 통과하는 지점의 로그입니다. 7 번째 포인트가 끝나면 캔버스 컨텍스트의 "globalCompositeOperation"속성을 "destination-out"으로 변경하고 그 반대로 그리기를 시작합니다. 아래에서 볼 수 있듯이 앞으로 및 뒤로 방향의 지점은 정확히 동일합니다. 하지만 내 문제는 거꾸로 삭제하는 동안 라인이 올바르게 삭제되지 않습니다. 나는 약간의 흔적을 볼 수있다. Chrome, Firefox, Opera에서 문제가 확인되었습니다.

point X: (484,324) with Count: 0 angle :0.7853981633974483 
spiroCanvasCore.js:62point X: (460,420) with Count: 1 angle :1.5707963267948966 
spiroCanvasCore.js:62point X: (315,444) with Count: 2 angle :2.356194490192345 
spiroCanvasCore.js:62point X: (220,300) with Count: 3 angle :3.141592653589793 
spiroCanvasCore.js:62point X: (315,155) with Count: 4 angle :3.9269908169872414 
spiroCanvasCore.js:62point X: (460,179) with Count: 5 angle :4.71238898038469 
spiroCanvasCore.js:62point X: (484,275) with Count: 6 angle :5.497787143782138 
spiroCanvasCore.js:62point X: (460,300) with Count: 7 angle :6.283185307179586 
spiroCanvasCore.js:79inverse 
spiroCanvasCore.js:62point X: (484,275) with Count: 7 angle :5.497787143782138 
spiroCanvasCore.js:62point X: (460,179) with Count: 6 angle :4.71238898038469 
spiroCanvasCore.js:62point X: (315,155) with Count: 5 angle :3.9269908169872414 
spiroCanvasCore.js:62point X: (220,300) with Count: 4 angle :3.141592653589793 
spiroCanvasCore.js:62point X: (315,444) with Count: 3 angle :2.356194490192345 
spiroCanvasCore.js:62point X: (460,420) with Count: 2 angle :1.5707963267948966 
spiroCanvasCore.js:62point X: (484,324) with Count: 1 angle :0.7853981633974483 

아무에게도이 문제 또는 다른 대안/해결책의 원인이 될 수 있습니까? 여기

은 삭제 후, 내 곡선의 스크린 샷입니다 :

편집 : 대신 'deatination 아웃'에 globalCompositeOperation 속성을 변경, 나는 단순히 내 배경에 맞게 캔버스 문맥의 strokestyle 변경 색깔. 그래도 문제가 지속됩니다

Answer 1

문제의 원인은 앨리어스 제거입니다. 코드들의 제 1 세트에서 http://jsfiddle.net/9bheb/5/

ctx.lineWidth = 1; 

ctx.strokeStyle = '#f00'; 
ctx.strokeRect(10.5, 10.5, 20, 20);  
ctx.strokeStyle = '#fff'; 
ctx.strokeRect(10.5, 10.5, 20, 20); 

// Middle case omitted for brevity 

ctx.strokeStyle = '#f00'; 
ctx.strokeRect(40, 10, 20, 20); 
ctx.strokeStyle = '#fff'; 
ctx.strokeRect(40, 10, 20, 20); 

100 % 불투명 1 픽셀의 적색 선을 정확히 캔버스 그리드 정렬 그려, 상기 왼쪽에서 본 : 조성물 모드로부터 분리 다음을 생각 해보자. 그런 다음 100 % 불투명 한 흰색 선을 그 위에 겹쳐서 원래 선을 제거합니다.

두 번째 코드 집합에서 1 픽셀 줄은 정확하게 두 픽셀 사이에 걸쳐 있으므로 2 픽셀 50 % 불투명도 빨간색 테두리로 그려집니다. 그런 다음 2x50 %의 흰색 라인이 그려진 그려지고 캔버스에 25 %의 빨간색 (밝은 분홍) 테두리가 나타납니다 (오른쪽 위 참조). 이는 대략 합성 모드를 통해 이루어 지지만 귀하의 경우에 일어난 일입니다.

경로를 다시 그려서 경로를 "지울"수 없습니다.

Answer 2

대신 부분을 "삭제"하는 대신 원하는 부분의 곡선 부분을 지워서 삭제 될 부분을 만들 수 없습니까?

Answer 3

Phrogz의 멋진 분석에서 시작하여 약간 큰 lineWidth로 지우면 남은 그림자를 없앨 수 있습니다.

삭제할 때 lineWidth = 2으로 설정하여 자신의 jfiddle로 시도해보십시오. 내 포크는 다음과 같습니다. // http://jsfiddle.net/UxfNg/3/