Question

有人能解释为什么这段代码在最后一栏中没有显示蓝色吗？

var frame = 0;
var frame_counter = 1;    
var draw_rainbow = function(){
for (var i = 1; i <= 6; i++){
  color_picker = i + frame;
  if (color_picker > 6) {
      color_picker -= 6;
  }
  switch(color_picker){
    case 1:
      color = "red";
      break;
      case 2:
      color = "orange";
      break;
      case 3:
      color = "yellow";
      break;
      case 4:
      color = "green";
      break;
      case 5:
      color = "blue";
      break;
      case 6:
      color = "purple";
      break;   
  }
  var x = canvas.width / 6 * (i-1);
  var y = 0;
  var width = canvas.width / 6;
  var height = canvas.height;
  ctx.fillStyle = color;
  ctx.fillRect(x,y,width,height);
}
};
var frame_update = function() {
if(frame_counter >= 0) {
  frame++;
  }
if (frame > 4) {
  frame -= 5;
}
frame_counter *= -1;
};

我的间隔调用了绘制彩虹和帧更新功能。我显示所有其他颜色都很好但是在屏幕右端的那一列中它从不显示蓝色。

http://jsfiddle.net/isherwood/g5BP3/

Answer 1

这是实现目标的另一种更简单的方法 -

首先定义数组中的颜色：

var colors = ['red','orange', 'yellow', 'green', 'cyan', 'blue', 'purple'];

有一个更新方法，将当前订单绘制到画布。由于我们可以使用数组的长度来确定我们需要绘制多少颜色以及每个条的宽度，因此该方法将是动态的，您可以向数组添加或删除颜色，并且该方法将采用。

该方法还为每次更新旋转数组：

function update() {

    var i = 0,                             // iterator for array
        dx = canvas.width / colors.length; // width of each bar

    for(; i < colors.length; i++) {        // loop through array
        ctx.fillStyle = colors[i];         // set color
        ctx.fillRect(i * dx, 0, dx, h);    // fill that bar
    }

    // rotate array
    colors = colors.slice(1, colors.length).concat(colors.slice(0, 1));
}

（有关如何使用轮换的详细信息，请参阅this answer。）

最后，通过每秒调用更新方法n次来启动动画。

正如您所看到的，无需检查每次更改颜色数时需要更新这些检查的条件，并且还会删除它们的开销。

<强> FIDDLE

某些颜色未在某个位置显示

1 个答案: