canvas-6shadow.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 1024;

            canvas.height = 768;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                context.fillStyle = "#058";

                context.font = "bold 120px Arial";

                context.textAlign = "center";

                context.textBaseline = "middle";

                //begin

                context.shadowColor = "gray";

                context.shadowOffsetX = 20;

                context.shadowOffsetY = 20;

                context.shadowBlur = 25;

                context.fillText("Canvas",canvas.width/2,canvas.height/2)

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

    </script>

</body>

<script>

    /*阴影

        context.shadowColor

        //偏移坐标

        context.shadowOffsetX

        context.shadowOffsetY

        //模糊程度

        context.shadowBlur

    */

</script>

</html>