Canvas 투명도를 이용한 예제를 해보았습니다. globalAlpha에 0 ~ 1 의 값을 주면
이후의 그리기에 투명도가 계속 적용됩니다. (사실 불투명도 입니다.)
아주 간단한 예제라서 올리기에 좀 민망하지만, 그냥 올립니다. 🍰🍰🍰
<!DOCTYPE html>
<style>
#canvas1 {
border: 2px solid gray;
max-width: 100%;
box-sizing: border-box;
}
</style>
<canvas id="canvas1" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "dodgerblue";
ctx.fillRect(0, 0, 400, 300);
ctx.globalAlpha = 0.1;
ctx.fillStyle = "white";
for (var i = 0; i < 10; i++) {
ctx.fillRect(30 + i * 15, 30 + i * 10, 200, 150);
}
</script>