HTML5 캔버스에서 그리기 작업의 투명도를 조절하려면 globalAlpha 속성을 사용합니다. 이 속성은 캔버스에 그려지는 도형과 이미지의 전체 투명도 값을 결정합니다.
globalAlpha 속성의 값
globalAlpha 속성은 0.0부터 1.0 사이의 값을 가질 수 있으며, 각 값의 의미는 다음과 같습니다.
- 1.0 : 완전히 불투명 (투명도 없음, 기본값)
- 0.0 : 완전히 투명
- 0.0 ~ 1.0 사이의 값 : 반투명 상태로 렌더링
따라서 globalAlpha 속성을 0.0으로 설정하면 이후에 그리는 모든 요소가 화면에 나타나지 않으므로, 결과적으로 투명한 캔버스를 얻을 수 있습니다.
예제 코드
아래 예제를 실행하면 초록색 사각형만 보이고, globalAlpha가 0.0으로 설정된 이후에 그려진 노란색과 빨간색 사각형은 투명하게 처리되어 나타나지 않습니다.
<!DOCTYPE html>
<html>
<body>
<canvas id = "idCanvas" width = "400" height = "200" style = "border:2px solid #000000;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("idCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.0;
ctx.fillStyle = "yellow";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "red";
ctx.fillRect(80, 80, 75, 50);
</script>
</body>
</html>참고 사항
globalAlpha는 설정 시점 이후에 그려지는 모든 드로잉 작업에 적용됩니다. 즉, 이미 캔버스에 그려진 내용에는 영향을 주지 않습니다. 부분적으로만 투명한 효과를 원한다면 0.0 대신 0.5 같은 중간 값을 사용하면 됩니다. 또한 개별 색상에만 투명도를 적용하고 싶다면 fillStyle에 rgba() 형식(예: rgba(255, 255, 0, 0))을 사용하는 방법도 있습니다.