关联数据的对象

Question

我目前正在为我的智能播放器制作一些代码.. 然后我突然遇到了问题.. 我希望代码显示7个不同颜色的7个圆圈，匹配数组＆＃34;颜色＆＃34;。当我运行代码时，它只会返回数组中的绿色第一种颜色。任何人都可以帮我解决这个问题吗？

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

colors [i]是正确的方法。我不知道为什么要尝试使用两个模块。

Answer 2

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

＆＃13;

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

＆＃13;

canvas { border: 1px solid black }

＆＃13;

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

＆＃13;

Answer 3

关联数据的对象

在javascript中，当您拥有关联的数据字段时，最好将数据保存在对象中。

例如

circle = {
   color : "blue",
   posX : "100",  // WARNING!!! Important Note see bottom of answer...
}

这使得组织和管理代码变得更加容易，尤其是随着更多数据变得越来越复杂。对象还可以存储其他对象。它们还可以保存对该数据唯一的行为（或者在具有共同行为的许多对象类型之间共享）。

虽然以这种方式创建所有对象比在平面数组中长一些，但您可以通过创建帮助来简化此操作。

以下内容将创建一个circles对象，其中包含圆圈共有的圆圈和数据函数。

const circles = {
     items : [],
     centerY : 50,
     radius : 20,
     add(color, centerX) {  // in objects you don't need to add the function token. This is the same as add : function (color, centerX) {
         this.items.push({
             color, centerX,
             draw(ctx){
                 ctx.beginPath();
                 ctx.arc(this.centerX, circles.centerY, circles.radius, 0, 2 * Math.PI, false);
                 ctx.fillStyle = this.color;
                 ctx.fill()
             }
         });
     },
}

或者虽然它可能需要更多的内存，但它可以更灵活地执行以下代码段。（x和y也是排名的常见缩写，我个人使用r表示半径，w表示宽度，h表示身高，{{{ 1}}用于颜色（颜色）。为您节省大量的输入，只要您使用这些变量名称的唯一时间是它们代表同样的东西，您的代码保持（更多）可读）

col

有很多方法可以输入数据，但要保持紧凑，你可以创建一个临时数组并从该数组输入它们

const circles = {
    items : [],
    add(col, x, y = 50, r= 20) { // y and radius have optional arguments 
                                 // that are set to 50 and 20 respectively if you 
                                 // don't supply them
        this.items.push({
            col, x, y, r,
            draw(ctx){
                 ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
                ctx.fillStyle = this.col;
                ctx.fill()
            }
        })
    },
}

您还可以修改[["green",325],["blue",475],["green",625]] .forEach(item => circles.add(...item)); // the ... turns an array into arguments // the missing data x,r are set // to the defaults.和y半径

所以使用一个对象来做你的函数，默认值（注意我换了[["green",325],["blue",475],["green",625],["green",775],["green",925],["green",1075],["green",1225,undefined,10]] // the last item has a different radius // undefined will set the default value for Y // and the 10 sets the radius. .forEach(item => circles.add(...item));，x以便在我想要默认颜色时输入col，或者你可以定义一个undefined并使用const U = undefined;（虽然纯粹主义者会反对这一点，他们的论证最多也是弱的））

实施例

该示例将y pos默认为画布高度中心并设置默认圆圈颜色，因此您不必多次输入绿色。就像我将蓝色圆圈做得更大一样

＆＃13;

const ctx = canvas.getContext('2d');
const PI2 = Math.PI * 2; // common use constant values
const U = undefined; // Alias (AKA) undefined
const circles = {
    items : [],
    drawAll() { this.items.forEach(c => c.draw()) }, 
    add(x, col = "green", y = canvas.height / 2, r= 20) {  // default y to canvas center
        this.items.push( {x, y, col, r,  // the order of these make no dif
            draw(){                  // da draw function
                ctx.fillStyle = this.col;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, PI2);  // false is the default last argument so not needed if drawing clockwise                    
                ctx.fill();
            }
        });
    },
};
[[325], [475, "blue", U, 25], [625], [775], [925], [1075], [1225]].forEach(i => circles.add(...i));     

circles.drawAll(); // draw all circles

＆＃13;

canvas { border: 2px solid black }

＆＃13;

警告字符串和数字不相同。

顶部摘录

注意

<canvas id="canvas" width="1300" height="70"></canvas>

Don`t 当您需要数字时使用字符串

通过画布中的颜色循环

3 个答案:

关联数据的对象

实施例

警告字符串和数字不相同。