前面《好玩的Canvas:直线(线段)、图形的绘制》一文讲述了Canvas绘制直线和矩形,本文将讲述如何绘制五角星,首先在纸上计算推导五角星五个坐标点:
canvas绘制五角星推导
然后我们可以看到五个角坐标规律,下面开始绘制:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas绘制五角星</title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        function get_dom(id){
            return document.getElementById(id);
        }

        //canavs绘制五角星
        //中心点坐标(x0,y0)
        //m,h五角星中心点到凸角和凹角的长度,使m大小接近于2*h
        function create_5(cxt,x0,y0,m,h){
            var a = 18;
            var b = 54;
            cxt.beginPath();
            for(i=0;i<5;i++){
                cxt.lineTo( m*Math.cos((a+i*72)*Math.PI/180)+x0, m*Math.sin((a+i*72)*Math.PI/180)+y0 );
                cxt.lineTo( h*Math.cos((b+i*72)*Math.PI/180)+x0, h*Math.sin((b+i*72)*Math.PI/180)+y0 );
            }
            cxt.closePath();
            cxt.stroke();
        }

        var canvas = get_dom("canvas");
        var cxt = canvas.getContext("2d");
        create_5(cxt,100,100,100,50);

    </script>
</html>

效果如下:
image

最后修改日期:2020-03-14

留言

很酷…我只会搜索到你这样的网页,然后 Ctrl C/V…

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。