javascript - 循环显示 3 种颜色然后返回原始颜色

Question

我一直在 Canvas 上创建一个元素，用户在该元素上触摸/或单击圆圈以更改其颜色

这就是我目前所处的位置。

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

起始颜色是#DDDDDD，然后当它被点击或触摸时变为#FFC926，然后当被点击或触摸时变为#FF0000 我怎样才能再添加 1 种颜色然后恢复到原来的颜色

我需要做的是:

开始:#DDDDDD

触摸 1:#FFC926

触摸 2:#FF0000

触摸 3:#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();
});