Question

我目前有一个包含5种不同颜色的数组，并且我有一个for循环来循环显示这些颜色并将它们赋予形状并显示它们。

var canvas = document.getElementById('canvas');
var gc = canvas.getContext('2d');

var xPos = 25;
var yPos = 25;  

var colourArray = [];
    colourArray[0] = 'red';
    colourArray[1] = 'yellow';
    colourArray[2] = 'blue';
    colourArray[3] = 'magenta';
    colourArray[4] = 'green';

for(var count = 0; count < 5; count++){
    myColour = colourArray[count];
    xPos = 20+70*count;
    gc.beginPath();
    gc.rect(xPos, yPos, 50, 50);
    gc.fillStyle = myColour;
    gc.fill();
}

对于我的生活，我正试图找到一种方法来扭转它，所以它首先显示绿色，最后显示红色。

Answer 1

根据数组的长度，只需更改从数组中访问的索引。在第一次迭代中，您希望获得数组中的最后一项（在本例中为4），并且在最后一次迭代中，您希望获得索引0处的项目。无论您有多少颜色，此代码都将起作用在colourArray：

var length = colourArray.length;

for (var i = 0; i < length; i++) {
    myColour = colourArray[length - (i + 1)];
    xPos = 20+70*i;
    gc.beginPath();
    gc.rect(xPos, yPos, 50, 50);
    gc.fillStyle = myColour;
    gc.fill();
}

Answer 2

var colourArray = [];
colourArray[0] = 'red';
colourArray[1] = 'yellow';
colourArray[2] = 'blue';
colourArray[3] = 'magenta';
colourArray[4] = 'green';

colourArray =colourArray.reverse();

反转数组（彩色形状）

2 个答案: