JavaScript로 캔버스 요소 '문질러 내기'효과

Question

나는 더러운 창 그래픽을 표시하는 캔버스 <canvas></canvas>을 가지고 있습니다. 커서를 사용하여 창을 정리하고 그 뒤에 다른 이미지를 표시 할 수 있어야합니다. 이 웹 사이트에서 브러시를 사용하는 것처럼 페이지에 추가하는 대신 이미지를 표시하려면 내용을 제거해야합니다. http://mudcu.be/sketchpad/ 여기

는 예 전과의와 '밖으로 마찰'후입니다 :

http://www.titaniumwebdesigns.com/images/forums/before.png       http://www.titaniumwebdesigns.com/images/forums/after.png

Answer 1

이 complete DEMO

globalCompositeOperation 캔버스 API의 가장 좋은 기능 중 하나입니다 참조하십시오.

원하는 효과를 얻으려면 multiple canvas layers과 globalCompositeOperation을 사용합니다. 이 솔루션에서

우리는 3 개 개의 층이 있습니다

층 1-         바닥을                             레이어 2 - 중간
,727,     

레이어 3 - 상단

중동 및 최고 층 정적 만 중간 계층 동적 globalCompositeOperation을 사용하여 클리어입니다. globalCompositeOperation = "xor" 함께

middleCtx.globalCompositeOperation = "xor"; 

는 브러시 층 위에 그려진이 그려진 캔버스의 부분을 소거한다.

최종 결과는 다음과 같습니다

---

UPDATE :

는 윈도우가 완전히 내가 다른 층의 같은 크기의 숨겨진 캔버스를 만들고 청소하고 그려되었는지 확인하려면 그 위에 검은 색 사각형이 있습니다. 캔버스 위로 마우스를 드래그하면 투명 그라디언트 색상의 원으로 레이어 2 (중간)가 지워지고 이제는 숨겨진 캔버스 위에 흰색이있는 원 (검정과 다른 색상 일 수 있음)이 그려집니다.

이렇게하면 숨겨진 캔버스의 픽셀 만 확인하고 검은 픽셀이없는 경우 창을 청소합니다. 때문에

pixels = imageData.data; 

requestAnimationFrame 루틴이 성능 이유에 사용되는 : 이미지 데이터로부터의 픽셀을 얻을 다음

imageData = context.getImageData(x, y, width, height) 

과 :

우리는 같은 것을 사용하는 데 필요한 이미지 데이터를 얻으려면 getImageData은 느릴 수 있습니다. 코드의 주요 변경 사항은 각 마우스 이동 이벤트에서 해당 동작을 수행하는 대신 마우스를 끌 때 브러시 동작을 애니메이션 프레임 안에 넣는 것입니다. 이렇게하면 프로세서가 픽셀 데이터 검증을 수행하는 데 더 많은 시간을 가질 수 있습니다. 여기

창 청소 때 픽셀 데이터 검증 및 경고와 수정 된 바이올린입니다 :
는 jsFiddle link

Answer 2

당신은 당신이 한 번에 흐린 이미지를, 당신이해야 그린 캔버스가있는 경우 "브러시"이미지 (부드러운 가장자리가있는 반투명 원을 포함하는 이미지)를 만들어 해당 효과를 만들 수 있고 다음을 사용하여 캔버스에서 이미지를 마우스 좌표로 그릴 수 있습니다.

,

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

은 즉시 캔버스에 흐린 이미지를 그린 것처럼, 당신은 단지 지정된 복합 작업을 사용 후 한번에 그려 이미지 위의 라인을 호출해야합니다.