2.7.2_剪纸图形

来源：互联网发布：淘宝新品上架手机编辑：程序博客网时间：2024/04/28 16:27
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 = 'goldenrod';        draw();        function draw(){            context.clearRect(0,0,context.canvas.width,context.canvas.height);            context.save();            context.shadowColor = 'rgba(200,200,0,0.5)';            context.shadowOffsetX = 12;            context.shadowOffsetY = 12;            context.shadowBlur = 15;            drawCutouts();            strokeCutoutShapes();  //给外轮廓描边            context.restore();        }        function drawCutouts(){ //绘制外框            context.beginPath();            addOuterRectanglePath();            addCirclePath();            addRectanglePath();            addTrianglePath();            context.fill();        }        function strokeCutoutShapes(){  //描边            context.save();            context.strokeStyle = 'rgba(0,0,0,0.7)';            context.beginPath();            addOuterRectanglePath();            context.stroke();            context.beginPath();            addCirclePath();            addRectanglePath();            addTrianglePath();            context.stroke();            context.restore();        }        function addOuterRectanglePath(){            context.rect(110,25,370,335);  //正常是按照顺时针方向绘制的        }        function addCirclePath(){            context.arc(300,300,30,0,Math.PI*2,true); //true为逆时针方向中绘制        }        function addRectanglePath(){            rect(310,55,70,35,true);    //逆时针四边形        }        function addTrianglePath(){     //逆时针三角形            context.moveTo(400,200);            context.lineTo(250,115);            context.lineTo(200,200);            context.closePath();        }        function rect(x,y,w,h,direction){  //自定义绘制四边形            if(direction){              //逆时针                context.moveTo(x,y);                context.lineTo(x,y+h);                context.lineTo(x+w,y+h);                context.lineTo(x+w,y);                context.closePath();            }else{                      //顺时针                context.moveTo(x,y);                context.lineTo(x+w,y);                context.lineTo(x+w,y+h);                context.lineTo(x,y+h);                context.closePath();            }        }    </script></html>
0 0