javascript - 遍历 Canvas 中的颜色

Question

我目前正在为我的智能播放器编写一些代码。然后我突然遇到了一个问题..我希望代码显示 7 个具有 7 种不同颜色的圆圈，与数组“颜色”相匹配。当我运行代码时，它只会返回数组中的绿色第一种颜色。谁能帮我解决这个问题？

var colors = ["green", "blue", "green", "green", "green", "green", "green"]; 
//Store all colors in a array to prevent loads of code
    for (i = 0; i < colors.length; i++) {
        console.log(colors[i]);
        var centerX = ["325", "475", "625", "775", "925", "1075", "1225"];
        //This will control the x-coordinate of the circles
        for (p = 0; p < centerX.length; p++){
            ctx.beginPath();
            ctx.arc(centerX[p], centerY, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = colors[i%2];
            ctx.fill();
        }

    }

Answer 1

你让事情变得复杂了。可以简单地按如下方式完成......

var ctx = c.getContext('2d');

var colors = ["green", "blue", "green", "green", "green", "green", "green"];
var centerX = [325, 475, 625, 775, 925, 1075, 1225];
var centerY = 50;
var radius = 20;

for (i = 0; i < colors.length; i++) {
   ctx.beginPath();
   ctx.arc(centerX[i], centerY, radius, 0, 2 * Math.PI, false);
   ctx.fillStyle = colors[i];
   ctx.fill();
}

canvas { border: 1px solid black }

<canvas id="c" width="1300" height="100"></canvas>