html5에서 투명 캔버스를 만들려면 어떻게해야합니까?

html5에서 투명 캔버스를 만들려면 어떻게해야합니까?

---

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

---

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

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

캔버스를 유리판 위에 그리는 것처럼 생각하십시오.

---

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

#canvasID{
    opacity:0.5;
}

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

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

---

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

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

---

캔버스의 배경을 투명하게 설정하십시오.

#canvasID{
    background:transparent;
}

---

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

나는이 같은 문제가 있었고 여기에서 해결책을 찾지 못했습니다. 그 위에 투명 캔버스가 하나있는 불투명 캔버스가있었습니다. 불투명 한 캔버스는 완전히 보이지 않지만 페이지 본문의 배경이 보입니다. 투명 캔버스의 그림은 보이지 않지만 그 아래의 불투명 캔버스는 보이지 않았습니다.

---

마지막 대답은 말할 수 없지만 수정은 비교적 쉽습니다. 불투명 캔버스의 배경색을 설정하십시오.

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

확실하지 않지만 배경색이 몸에서 투명하게 상속 된 것처럼 보입니다.

---

    var canvasBgColor = "#fff";
    this.canvas.fillStyle=canvasBgColor;
    this.canvas.fillRect(0, 0,this.canvas.width,this.canvas.height);

먼저 흰색 사각형을 캔버스 배경색으로 그릴 수 있습니다.

참고 URL : https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5