如何进一步使用列和行重构ctx.fillStyle?

时间:2018-03-20 18:19:55

标签: javascript canvas html5-canvas refactoring

我最初写出了每一列和一行,并且我试图进一步重构它。

var r0 = (r == 0);
var r1 = (r == 1);
var r2 = (r == 2);
var r3 = (r == 3);
var r4 = (r == 4);
var r5 = (r == 5);
if (c == 0) {
  if (r0) ctx.fillStyle = "#9fc30d";
  if (r1) ctx.fillStyle = "#d13d42";
  if (r2) ctx.fillStyle = "#1bf839";
  if (r3) ctx.fillStyle = "#6776ef";
  if (r4) ctx.fillStyle = "#d13e9e";
  if (r5) ctx.fillStyle = "#339ca6";
}
if (c == 1) {
  if (r0) ctx.fillStyle = "#43f7ac";
  if (r1) ctx.fillStyle = "#8b97b5";
  if (r2) ctx.fillStyle = "#0f2aa5";
  if (r3) ctx.fillStyle = "#16c7b9";
  if (r4) ctx.fillStyle = "#9a02fc";
  if (r5) ctx.fillStyle = "#74c11c";
}

是否有某种方法可以将ctx.fillStyle放入变量中,就像我对行一样? 仅供参考:有更多专栏,但我刚刚在这里写了两列。

1 个答案:

答案 0 :(得分:2)

您可以使用2D数组并使用c作为第一个索引,使用r作为第二个索引。

var fillStyle = [
        ["#9fc30d", "#d13d42", "#1bf839", "#6776ef", "#d13e9e", "#339ca6"],
        ["#43f7ac", "#8b97b5", "#0f2aa5", "#16c7b9", "#9a02fc", "#74c11c"]
    ];

// usage
ctx.fillStyle = fillStyle[c][r];