javascript - 需要一些指南来通过 Javascript Canvas 制作新的菜单

Question

我要用画布制作一种新的菜单。这是我第一次使用画布。所以有几件事我需要你的帮助来启动这种菜单。这是一张图片：

很抱歉给您带来不便。我编辑了这篇文章，唯一的问题是：

如果我们有n个流（上图中是3个流），那么平均计算每个区域的半径以绘制如上图的原理是什么？

请给我你对这种菜单的建议或想法。我会感激的。提前感谢您的考虑，您的想法！祝你有美好的一天 ！

Answer 1

上面例子中的半径肯定是白线的长度，所以你想要任何长度？

如果您想要将扇区平均分为弧长相等的 n 个子扇区，那么您需要决定中心的最大角度是多少，在上面的示例中是 90 度或 pi/2 弧度。

最终，最大角度、分段弧长、分段角度和半径都通过以下方式连接：

subsector_arc_length = 半径 * subsector_angle

subsector_angle = max_angle/n

或// subsector_arc_length = radius * max_angle/n（注意这些需要弧度）

但是，如果您的目标是将其绘制到画布上，则类似于：

var canvas = '<canvas id="canvas" width="500" height="500" style="border: 1px solid black; width: 500px; height: 500px; background: lightblue;"></canvas>'
document.body.innerHTML += canvas;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var max_angle = Math.PI/2; //rad - 90deg
var no_of_flows = 10; 
var radius = 200; //pixels

ctx.lineWidth = 5;
ctx.strokeStyle = '#333';
ctx.translate(250,350);
ctx.beginPath();
ctx.rotate(-Math.PI/2);
ctx.rotate(-Math.PI/2 + max_angle/2);
for (var i=0; i<no_of_flows; i++) {
    ctx.moveTo(0,0);
    ctx.lineTo(0, radius);
    ctx.stroke();
    ctx.rotate(-1*max_angle/(no_of_flows-1));
};

您的主要问题是您可能会在画布上生成更好的图像。+ 菜单的事件结构。