[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed]

Question

The radius surely in the example above would be the length of the white lines, so any length you want??

If what you want is to equally divide the sector into n sub-sectors of equal arc length then you need to decide on what the maximum angle at the centre is going to be, in the above example its 90deg or pi/2 radians.

Ultimately, max angle, subsector arc length, subsector angle and radius are all connected through:

subsector_arc_length = radius * subsector_angle

subsector_angle = max_angle/n

or//
subsector_arc_length = radius * max_angle/n (Note these require radians)

But if your aim is draw this to canvas then something like:

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

Your main problem would you could probably generate a better image off canvas. + the event structure for the menu.

Accepted Answer