创建一个圆形导航菜单

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

码-

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