Html5系列（二十二）画布（阴影）

来源：互联网发布：java底层书籍编辑：程序博客网时间：2024/05/17 01:47

案例1：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        function draw(){            var c=document.getElementById("myCanvas");            var cxt= c.getContext("2d");            cxt.fillStyle="#eeeeff";            cxt.fillRect(0,0,400,320);            cxt.shadowOffsetX=10;            cxt.shadowOffsetY=10;            cxt.shadowColor='rgba(100,100,100,0.5)';            cxt.shadowBlur=7.5;            cxt.translate(60,60);            for( var i=0;i<6;i++)            {                cxt.translate(50,50);                cxt.scale(0.8,0.8);                cxt.rotate(Math.PI/10);                createStar(cxt);                cxt.fill();            }            function createStar(cxt){                var n=0;                var dx=0;                var dy=0;                var s=50;                cxt.beginPath();                cxt.fillStyle='rgba(255,0,0,0.5)';                var x=Math.sin(0);                var y=Math.cos(0);                var dig=Math.PI/5*4;                for(var i=0;i<5;i++)                {                    var x=Math.sin(i*dig);                    var y=Math.cos(i*dig);                    cxt.lineTo(dx+x*s,dy+y*s);                }                cxt.closePath();            }        }    </script></head><body onload="draw()"><canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas></body></html>效果图：

注释：（1）shadowOffsetX--阴影的横向位移量，即图形横向方向移动的距离；         shadowOffsetY--阴影的纵向位移量，即纵向方向移动的距离；         shadowColor--阴影的颜色；         shadowBlur--阴影的模糊范围，该属性是可选的。如果不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时可以使用该属性。属性值一般设定在0-10之间；

0 0