html5에서 투명한 캔버스를 어떻게 만듭니 까?

캔버스를 투명하게 만들려면 어떻게해야합니까? 두 개의 캔버스를 서로 위에 놓고 싶기 때문에 필요합니다.

캔버스는 기본적으로 투명합니다.

페이지 배경 이미지를 설정 한 다음 그 위에 캔버스를 놓으십시오. 캔버스에 아무것도 그려지지 않으면 페이지 배경을 완전히 볼 수 있습니다.

캔버스를 유리판에 그리는 것과 같다고 생각하십시오.

나는 당신이 내가 방금하려고했던 것을 정확히하려고한다고 믿는다 : 나는 두 개의 쌓인 캔버스를 원한다. 아래 하나는 정적 이미지를 가지고 있고 상단 하나는 애니메이션 스프라이트를 포함하고있다. 애니메이션 때문에 새 프레임마다 렌더링을 시작할 때 맨 위 레이어의 배경을 투명하게 지워야합니다. 마침내 답을 찾았습니다. globalAlpha를 사용하지 않고 rgba () 색상을 사용하지 않습니다. 간단하고 효과적인 대답은 다음과 같습니다.

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

특정 항목 <canvas id="canvasID">을 항상 투명하게하려면 설정 만하면됩니다.

#canvasID{
    opacity:0.5;
}

대신 캔버스 영역 내부의 특정 요소를 투명하게하려면 그릴 때 투명도를 설정해야합니다.

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

캔버스의 배경을 투명하게 설정하기 만하면됩니다.

#canvasID{
    background:transparent;
}

두 개의 캔버스를 세 번째 캔버스에 칠하십시오.

나는 똑같은 문제가 있었고 여기의 해결책 중 어느 것도 내 문제를 해결하지 못했습니다. 나는 그 위에 또 다른 투명한 캔버스가있는 하나의 불투명 캔버스를 가지고 있었다. 불투명 캔버스는 완전히 보이지 않았지만 페이지 본문의 배경은 보였습니다. 위에 투명 캔버스의 그림은 보였지만 그 아래의 불투명 캔버스는 보이지 않았습니다.

마지막 답변에 대해 설명 할 수는 없지만 수정은 비교적 쉽습니다. 불투명 캔버스의 배경색을 설정하기 만하면됩니다.

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

잘 모르겠지만 배경색이 몸에서 투명하게 물려받은 것 같습니다.