html5使用canvas绘制n角星

效果图：

动态变换：

五角星分析

函数调用：

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);

转载于:https://www.cnblogs.com/toly-top/p/9782011.html