나는 html5 캔버스에 doodling 응용 프로그램을 가지고 있으며 지우개 컨트롤을 구현하는 가장 좋은 방법을 찾아 내려고하고 있습니다. 첫 번째 충동은 지우개가 배경색 [흰색]을 그리는 것뿐 이었지만, 사용자가 이미지 나 다른 레이어를 이전에 지운 곳으로 이동하면 지우는 곳의 흰색 그림을 볼 수 있기 때문에 문제가됩니다.html5 캔버스에서 "지우기"
이상적으로는 지우기 컨트롤을 사용하여 픽셀을 검은 색으로 투명하게 변경하고 싶습니다. 분명히 lineTo를 사용하여이 작업을 수행 할 수는 없습니다. 분명히 검은 투명 선이 그려지기 때문에 원래의 기념일 로고는 그대로 유지됩니다. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까?
감사합니다.
, 당신은 아마 원하는 :
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";
하면 이전 globalCompositeOperation을 저장 한 다음 나중에 복원하거나 투명성을 기억 세계
대부분의 도움 참조 제대로 작동하지 않습니다!
지우개가 사각형 인 경우 clearRect를 살펴보십시오. clearRect 함수는 사양에 따라 사각형의 픽셀을 검정색으로 투명하게 만듭니다.
다른 지우개 모양 (예 : circle?)을 원한다면 픽셀 데이터를 조작해야합니다. 깃털 모양의 지우개가 필요하면 지옥이됩니다. 당신은 검은 색 투명 스트로크를 그리려는 경우 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
firefox 3.6/4.0은 전체 배경을 먼저 지움으로써 '복사'를 구현합니다. w3c 문서는 여기서 일어날 일에 대해 명확하지 않습니다. Chrome (webkit?)은 사양을 '픽셀이 실제로 그려지는 위치 만'으로 해석합니다. 예를 들어 stroke()의 결과입니다.
"rgba (255,255,255,1.0)"로 대상 출력은 프레임 버퍼의 픽셀이 투명하지 않은 배경을 투명으로 설정합니다. 크롬과 파이어 폭스 모두에 투명한 배경을 남겨 둡니다.
다음 페이지를 로컬로 복사하고 파란색 상자와 빨간색 원에 다양한 색상/불투명도로 재생하고 페이지 배경색을 흰색이 아닌 것으로 만드십시오! 및
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
당신은 브라우저가 격렬하게 다릅니다 찾을 수 있습니다.
http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp – zloctb
"검은 투명"이란 의미는 무엇입니까? 완전히 투명하면 색상이 무엇이든 상관 없습니다. –
Shh, Invisible Pink Unicorn의 참배자를 화나게하지 마세요;) – BarbaraKwarc