Question

我制作了一个二维数组，对于每个索引，我创建了一个对象并用颜色填充它。我想从这个数组中选择一个项目，并用不同的颜色填充它，但我的解决方案不起作用，我该怎么做？

这是代码（在JavaScript文件中，JavaScript在<canvas>之后）：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    width = canvas.width = 400,
    height = canvas.height = 400;

var cols = 10,
    rows = 10,
    w = width / cols,
    h = height / rows;

var grid = new Array(cols);

for(var i = 0; i < rows; i++){
    grid[i] = new Array(rows);
}

for(var i = 0; i < cols; i++){
    for(var j = 0; j < rows; j++){
        grid[i][j] = new Cell(i, j);
    }
}

for(var i = 0; i < cols; i++){
    for(var j = 0; j < rows; j++){
        grid[i][j].fill(255,255,255);
        grid[i][j].show(1);
    }
}
//This square should be black
grid[4][4].fill(0,0,0);

function Cell(x, y){
    this.x = x;
    this.y = y;

    this.fill = function(r, g, b){
        ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
    };

    this.show = function(stroke){
        rect(this.x * w, this.y * h, w, h, stroke);
    }
}

function rect(x,y,w,h,s){
    ctx.fillRect(x,y,w,h);
    if(s){
        ctx.strokeRect(x,y,w,h);
    }
}

Answer 1

首先：你的英语（和你的编码技巧）对你的年龄非常好！

现在解决您的问题：您的grid[4][4].fill(0,0,0);调用会更改画布上下文的填充样式，但实际上并未绘制已绘制的画布。您必须在之后再次致电grid[4][4].show(X);或自动调用fill()方法show()。

我还在代码中发现了一个潜在的错误：你将数组的第一个维度设为cols，然后使用rows上的内部数组循环填充fori循环。索引（数组X的大小，访问Y字段）。

Answer 2

@ Michael-Ritter打败了我的答案。

状态会更新但不会重新渲染。 这是Angular的双向数据绑定派上用场的地方。或者反应重新渲染技术。

我不习惯画布，所以似乎缺少一个eventListener。这就是我在您的代码中添加的内容。 Heres a Fiddle

canvas.addEventListener('click', function(e) {
  var x = Math.round(e.clientX / w);
  var y = Math.round(e.clientY / h);
  grid[x-1][y-1].fill(100, 100, 100);
  grid[x-1][y-1].show();
});

Answer 3

如上所述，您必须再次调用show()函数才能实际绘制已存在的图块。

您的代码有点冗长，其中包含所有for个循环。我在这里简化了一点：https://jsfiddle.net/rkstar/x3o1zyfb/

基本上它只是使用你的最后一个for循环，并在循环中创建黑色，而不是尝试在之后执行。

在JavaScript中选择并填充二维数组中的对象

3 个答案: