ブログでHTML5 Canvas 影

影を描く

自動的に影を描くこともできます。

<canvas id="drawShadowCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawShadowCanvas");
        var context = canvas.getContext("2d");
        context.shadowOffsetX = 20;
        context.shadowOffsetY = 10;
        context.shadowColor = "rgb(0, 0, 0)";
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(30, 30, 200, 100);
    })();
</script>

context.shadowOffsetX

は、影のx軸方向のオフセットです。


context.shadowOffsetY

は、影のy軸方向のオフセットです。


context.shadowColor

は、影の色です。
"rgba(0, 0, 0, 100)"というふうにしてもいいかも知れません。

---

影のぼかし

影はぼかすこともできます。

<canvas id="drawBlurredShadowCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawBlurredShadowCanvas");
        var context = canvas.getContext("2d");
        context.shadowOffsetX = 20;
        context.shadowOffsetY = 10;
        context.shadowColor = "rgb(0, 0, 0)";
        context.shadowBlur = 5;
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(30, 30, 200, 100);
    })();
</script>

context.shadowBlur

は、影のぼかしレベルです。