忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

ブログで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

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






拍手[0回]

PR