canvas创建阴影

标签: canvas

我们可以使用4个参数给画布上的形状添加阴影。

shadowOffsetX

shadowOffsetY

shadowBlur

shadowColor

例子:给对象添加阴影

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.fillStyle = 'red';

                context.shadowOffsetX = 4;
                context.shadowOffsetY = 4;
                context.shadowColor = 'black';
                context.shadowBlur = 4;
                context.fillRect(10, 10, 100, 100);

                context.shadowOffsetX = -4;
                context.shadowOffsetY = -4;
                context.shadowColor = 'black';
                context.shadowBlur = 4;
                context.fillRect(150, 10, 100, 100);

                context.shadowOffsetX = 10;
                context.shadowOffsetY = 10;
                context.shadowColor = 'rgb(100,100,100)';
                context.shadowBlur = 8;
                context.arc(200, 300, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                context.fill();
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="500">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

原文链接:加载失败,请重新获取