2.7.2_剪纸效果

来源：互联网发布：java批量上传文件编辑：程序博客网时间：2024/04/29 00:00
2.7.2_剪纸效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>路径描边与填充</title>        <style>        body{            background: #000000;        }            #canvas{                background: #fff;            }        </style>    </head>    <body>        <canvas id="canvas" width="1100" height="650"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas'),            context = canvas.getContext('2d');        //初始化        context.fillStyle = 'rgba(100,140,230,0.5)';        context.strokeStyle = context.fillStyle;        draw();        function draw(){            context.clearRect(0,0,context.canvas.width,context.canvas.height);            context.save();            context.shadowColor = 'rgba(0,0,0,0.8)';            context.shadowOffsetX = 12;            context.shadowOffsetY = 12;            context.shadowBlur = 15;            drawTwoArcs();            context.restore();        }        function drawTwoArcs(){            context.beginPath();            context.arc(300,190,150,0,Math.PI*2,false); //逆时针画外圆            context.arc(300,190,100,0,Math.PI*2,true); //顺时针画内圆            context.fill();            context.shadowColor = undefined;            context.shadowOffsetX = 0;            context.shadowOffsetY = 0;            context.stroke();        }    </script></html>
0 0