2.10.1_带有圆角的箭头图案

来源：互联网发布：c语言编写界面编辑：程序博客网时间：2024/05/21 07:02
2.10.1_带有圆角的箭头图案

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>带有圆角的箭头图案</title>    </head>    <body>        <canvas id="canvas" width="1000" height="600"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        arrow_margin = 30,  //箭头周围边距        point_radius = 7,   //指示点半径        points = [ //三个角的控制点和锚点                {                    x:canvas.width - arrow_margin,                    y:canvas.height - arrow_margin                },                {                    x:canvas.width - arrow_margin*2,                    y:canvas.height - arrow_margin                },                {                    x:point_radius,                    y:canvas.height/2                },                {                    x:arrow_margin,                    y:canvas.height/2-arrow_margin                },                {                    x:canvas.width - arrow_margin,                    y:arrow_margin                },                {                    x:canvas.width-arrow_margin,                    y:arrow_margin*2                }        ];        //初始化        context.clearRect(0,0,canvas.width,canvas.height);        drawArrow();        drawBezierPoints(); //绘制贝赛尔曲线        //绘制贝赛尔曲线        function drawBezierPoints(){            var i ,strokestyle,fillStyle;            for(var i=0;i<points.length;i++){                fillStyle = i%2 ===0?'white':'blue';                strokestyle = i%2 ===0? 'blue':'white';                drawPoint(points[i].x,points[i].y,strokestyle,fillStyle);            }        }        //        function drawPoint(x,y,strokeStyle,fillStyle){            context.beginPath();            context.fillStyle = fillStyle;            context.strokeStyle = strokeStyle;            context.lineWidth = 0.5;            context.arc(x,y,point_radius,0,Math.PI*2,false);            context.fill();            context.stroke();        }        //绘制箭头        function drawArrow(){            context.strokeStyle = 'white';            context.fillStyle = 'cornflowerblue';            //竖直的那条线            context.moveTo(canvas.width - arrow_margin, arrow_margin*2);            context.lineTo(canvas.width-arrow_margin,canvas.height-arrow_margin*2);            context.quadraticCurveTo(points[0].x,points[0].y,points[1].x,points[1].y);            context.lineTo(arrow_margin,canvas.height/2+arrow_margin);            context.quadraticCurveTo(points[2].x,points[2].y,points[3].x,points[3].y);            context.lineTo(canvas.width-2*arrow_margin,arrow_margin);            context.quadraticCurveTo(points[4].x,points[4].y,points[5].x,points[5].y);            context.fill();            context.stroke();        }    </script></html>
0 0