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

Question

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

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

如果我们有n个流量（上图中有3个流量），如上图所示，每个区域的半径均匀计算是什么原理？

请告诉我您对此类菜单的建议或想法。我会很感激。在此先感谢您的考虑，您的想法！祝你有个美好的一天！

Answer 1

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

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

最终，最大角度，子扇形弧长度，子扇形角度和半径都通过以下方式连接：

subsector_arc_length = radius * 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));
};

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