循环通过3种颜色然后再返回到原来的颜色

Question

我已经创建画布上的元件，在其上用户触摸/或点击圆改变其颜色

这就是我在迄今。

circle.on('touchstart', function() { 
     var fill = this.getFill() == '#DDDDDD' ? '#FFC926' : '#FF0000'; 
     this.setFill(fill); 
     layer.draw(); 
     }); 

开始的颜色是#DDDDDD那么当点击或触摸我怎么能添加1种颜色，然后恢复到原来的颜色变化＃FF0000时，其点击或触摸chages到＃FFC926然后

我需要发生的是：

开始：#DDDDDD

touch1：＃FFC926

touch2：＃FF0000

TOUCH3：＃000000

TOUCH4：#DDDDDD（休息吧）

只是不知道如何做到这一点用JS

Answer 1

您可以使用switch语句设置正确的颜色。

circle.on('touchstart', function() { 
    var current = this.getFill(); 
    var fill = ""; 
    switch (current) { 
     case "#DDDDDD": 
     fill = "#FFC926"; 
     break; 
     case "#FFC926": 
     fill = "#FF0000"; 
     break; 
     case "#FF0000": 
     fill = "#000000"; 
     break; 
     default: 
     fill= "#DDDDDD"; 
    } 
    this.setFill(fill); 
    layer.draw(); 
}); 

Answer 2

也有许多可用的方法

一个是开关的情况下： - 通过@TeeDeJee

一）我会建议你一个阵列的方法，因为它很容易维护和答案给你可以在将来它

var colorArray = new Array('#DDDDDD','#FFC926','#FF0000','#000000'); // add more color in the array 

arrayCounter = 0;    
circle.on('touchstart', function() { 
     if(arrayCounter == colorArray.length){ 
     arrayCounter = 0; 
     } 
     var fill = colorArray[arrayCounter++]; 
     this.setFill(fill); 
     layer.draw(); 
    }); 

二）增加更多的颜色选项的第二个使用你的条件语句的逻辑，但有点复杂的方式

circle.on('touchstart', function() { 
     var fill = (color == '#DDDDDD')? '#FFC926': (color == '#FFC926') ? '#FF0000' : (color == '#000000') ? '#DDDDDD' : '#000000'; 
     this.setFill(fill); 
     layer.draw(); 
    });