2013-09-03 2 views
2

캔버스에 색상을 채우고 싶습니다. 즉, div에 배경색을 표시하고 싶습니다. 나는 그것을 봤지만 어떤 해결책도 fillStyle을 아무 색으로도 찾지 못했습니다.HTML5 캔버스 fillStyle 없음

필자는 fillStyle을 생략 해 보았지만 검은 색으로 남겨 두었습니다.

옵션을 사용할 수 있습니까?

감사

+1

canvas do canvas.fillStyle = "transparent"'? – PlantTheIdea

+1

캔버스의 기본 "색상"은 투명합니다. 캔버스에 무언가를 그렸고 기본 div가 다시 표시되도록 전체 캔버스를 지우려면 context.clearRect (0,0, canvas.width, canvas.height)를 사용하십시오. 내부를 채우지 않고 무언가를 그리려면 context.fill()을 생략하고 context.stroke() 만 사용하십시오. 드로잉을 사용하여 이미 캔버스에있는 것을 지우려면 context.globalCompositeOperation = "destination-out"을 설정하면 새 드로잉이 배경 div가 보이게하는 지우개 역할을합니다. – markE

답변

5

당신은 캔버스를 취소하려면이 옵션을 사용해야합니다.

캔버스 요소의 배경에 CSS 규칙이 설정되어 있지 않은지 확인하십시오 (캔버스가 기본값으로 투명하므로 이 아닌 경우 투명 함).

당신은 당신이 복합 모드를 사용할 수있는 비정규직 모양을 취소해야하는 경우 : (하지만 약간의 변화와 너무 기존의 픽셀을 제거 xorsource-out도 어느 정도도 사용 가능)

context.globalCompositeOperation = 'destination-out'; 

을 .

그러면 그릴 다음 모양 (경로)의 형태로 캔버스가 지워집니다 (또는 단색 픽셀이 캔버스를 지울 이미지를 사용).

5

난 당신이 뭘 하려는지 모르겠지만, 당신이 당신의 캔버스 투명 수 있도록 할 것 같다. 당신은 자바 스크립트에서 그렇게 할 수 있습니다 :

context.fillStyle = "rgba(0, 0, 200, 0)"; 

또는 CSS에서

foo 캔버스 요소의 id 것 곳. 이렇게하면 내용 자체가 아닌 요소 자체가 투명하게됩니다.

context.clearRect(0, 0, canvas.width, canvas.height); 

(또는 당신이 필요로하는 사각형) :

#foo { 
    opacity: 0; 
} 
+0

'opacity : 0;'조각은 배경 색상이 아닌 전체 캔버스를 투명하게 만듭니다. – PlantTheIdea

+1

@PlantTheldea 정확히. OP와 함께하고 싶은 작업에 따라 솔루션이 될 수 있습니다. – federicot

0

캔버스를 지우고 투명도를 그릴 필요가 없습니다. 그냥 생각하면됩니다. 맑은 페인트를 사용하여 유리를 닦을 수 없으며, 동일한 내용이 <canvas> 요소에 적용됩니다. 이 때문에 캔버스 투명성을 유지, 아무것도 그립니다 전에

http://jsfiddle.net/Z6XTg/1/

이 캔버스 데모

ctx.clearRect(0,0,canvas.width,canvas.height); 

매우 간단한 작업을 수행합니다.