html5使用canvas绘制n角星

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30447263/article/details/80685418

效果图：

动态变换：

五角星分析

函数调用：

drawNStar(ctx, {
            "num": 26,//多少角星
            "R": 150,//中心到顶点距离
            "r": 50,//中心到凹点距离
            "x": 50,//左上角X坐标
            "y": 50,//左上角Y坐标
            "rot": 45// 旋转角度
        }, {
            "fs": "#F5E322",//填充色
            "lj": "round",//接头圆滑
            "lw": 2,//线宽
            "b": true,//有边线
            "f": true,//有填充
        });

---

函数体：

        /**
         * 绘制n角星
         * @param ctx
         * @param num 星星数量
         * @param R 中心到顶点距离
         * @param r 中心到凹点距离
         * @param x 左上角X坐标Y
         * @param y 左上角坐标
         * @param rot 旋转角度
         * @param configJson 配置信息
         */
        function _drawNStar(ctx, num, R, r, x, y, rot, configJson) {
            b2c(ctx, function () {
                var border = configJson["lw"];
                for (var i = 0; i < num; i++) {
                    var perDeg = 360 / num;
                    var degA = perDeg / 2 / 2;
                    var degB = 360 / (num - 1) / 2 - degA / 2 + degA;
                    ctx.lineTo(Math.cos((degA + perDeg * i - rot) / 180 * Math.PI) * R + x + border + R * Math.cos(degA / 180 * Math.PI),
                        -Math.sin((degA + perDeg * i - rot) / 180 * Math.PI) * R + y + border + R);
                    ctx.lineTo(Math.cos((degB + perDeg * i - rot) / 180 * Math.PI) * r + x + border + R * Math.cos(degA / 180 * Math.PI),
                        -Math.sin((degB + perDeg * i - rot) / 180 * Math.PI) * r + y + border + R);
                }

            }, configJson);
        },
        //使用json格式传参
       function drawNStar(ctx, infoJson, configJson) {
            var num, R, r, x, y, rot;
            num = infoJson["num"];
            R = infoJson["R"];
            r = infoJson["r"];
            x = infoJson["x"];
            y = infoJson["y"];
            rot = infoJson["rot"];
            _drawNStar(ctx, num, R, r, x, y, rot, configJson)
        }

                /**
         * beginPath到closePath
         * @param ctx 上下文
         * @param callback 回调函数
         * @param configJson 配置信息
         */
        function b2c(ctx, callback, configJson) {
            ctx.beginPath();
            if (callback && typeof(callback) === "function") {
                callback();
            }
            ctx.closePath();//会封闭图形

            ctx.lineWidth = configJson["lw"];
            ctx.strokeStyle = configJson["ss"];
            ctx.fillStyle = configJson["fs"];
            ctx.lineJoin = configJson["lj"];
            ctx.lineCap = configJson["lc"];

            if (configJson["f"]) {
                ctx.fill();
            }
            if (configJson["b"]) {
                ctx.stroke();//绘制
            }
        }

动态变换角数

        var count = 3;
        var timer = null;
        timer = setInterval(function () {
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            myCanvas.drawNStar(ctx, {
                "num": count,//多少角星f
                "R": 100,//中心到顶点距离
                "r": 50,//中心到凹点距离
                "x": 50,//左上角X坐标
                "y": 50,//左上角Y坐标
                "rot": 45// 旋转角度
            }, {
                "fs": "#FCFA31",//填充色
                "lj": "round",//接头圆滑
                "lw": 2,//线宽
                // "b": true,//有边线
                "f": true,//有填充
            });
            count++;
            console.log("{count}--{" + count + "}");
            if (count > 150) {
                clearInterval(timer);
            }
        }, 50);