填充轮盘的内容

Question

我有没有数字的轮盘赌（作为图像）。 我想在正确的位置并以正确的角度动态填充轮盘数字。 我想将数字绝对定位在该图像上。 我的车轮图像是1000 x 1000像素。

我尝试通过循环设置位置和角度，但是这些位置不是线性的，并且（在我的非数学眼中）是随机的。

const roulette_arr = []; //contains als numbers in right order. 0..32..15..19...
for (let i = 0; i < roulette_arr.length; i++) {
    let degree = 10 + (i * 10); //360 degree / 36 Numbers
    let position_x=...
    let position_y=...

    //function do all the stuff later
    setNumber(roulette_arr[i], degree, position_x, position_y);
}

我认为角度是可行的，但位置仍然是个问题。 我能做什么？

Answer 1

这是三角函数。 有更大的问题吗？

 var can = document.getElementById("can"); var ctx = can.getContext("2d"); var numbers = "0-32-15-19-4-21-2-25-17-34-6-27-13-36-11-30-8-23-10-5-24-16-33-1-20-14-31-9-22-18-29-7-28-12-35-3-26".split("-"); var cx = can.width / 2; var cy = can.height / 2; var cr = Math.min(cx, cy) * 0.9; // for (var i = 0; i < numbers.length; i++) { var angle = i / numbers.length * 360; var rad = i / numbers.length * Math.PI * 2 - Math.PI / 2; var x = cx + Math.cos(rad) * cr; var y = cx + Math.sin(rad) * cr; ctx.fillText(numbers[i], x, y); } 

 <canvas width="400" height="400" id="can">oh no</canvas>