创建一个圆形导航菜单

Question

我想创建一个带导航项的圆形菜单。约束是文本也是弯曲的。这是fiddle通过绘制2幅画布我所经历的，但我仍然无法绑定点击框模型约束的项目原因。我们可以使后面的画布透明并将其放在原始div或渲染文本上，同时在顶部画布中渲染画布。

代码 -

function drawTextAlongArc(context, str, centerX, centerY, radius, angle, position, adjustFactor){
    context.save();
    context.translate(centerX, centerY);
    context.rotate((position-1)*45*Math.PI/180);
    context.rotate(-1 * (angle / str.length) / 2);
    context.rotate((adjustFactor-str.length)/(2*adjustFactor)*45*Math.PI/180);
    for (var n = 0; n < str.length; n++) {
        context.rotate(angle / str.length);
        context.save();
        context.translate(0, -1 * radius);
        var char = str[n];
        context.fillText(char, 0, 0);
        context.restore();
    }
    context.restore();
}
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var inputText = ["BIRTH","SCHOOL","JOB","COLLEGE","LIFE","MARRIAGE","OTHERS","OTHERS"];
    var adjustFactor = 10;
    context.font = "12pt Arial";
    context.fillStyle = "silver";
    context.textAlign = "center";
    var centerX = canvas.width / 2;
    var centerY = canvas.height - 200;
    //var angle = 45*Math.PI/180 // radians
    var angle = inputText.length/adjustFactor*45*Math.PI/180;
    var radius = 160;
    for(var i=0;i<8;i++){
        var position = i+1;
        var angle = inputText[i].length/adjustFactor*45*Math.PI/180
        //var adjustFactor=Math.round(inputText[i].length*3.33);
        console.log(adjustFactor);
        drawTextAlongArc(context, inputText[i], centerX, centerY, radius, angle, position,adjustFactor);
    }
    //var position = 4;    
};