Question

我有这个：

var ctx = canvas.getContext( '2d' );

....
....

ctx.fillStyle = 'blue';

真正需要改变的是俄罗斯方块游戏的形状。他们是这样写的：

var shapes = [
[ 1, 1, 1, 1 ],

[ 1, 1, 1, 0,
  1 ],

[ 1, 1, 1, 0,
  0, 0, 1 ],

[ 1, 1, 0, 0,
  1, 1 ],

[ 1, 1, 0, 0,
  0, 1, 1 ],

[ 0, 1, 1, 0,
  1, 1 ],

[ 0, 1, 0, 0,
  1, 1, 1 ]
];

我想改变第一个的颜色，即[1,1,1,1]或形状[0]，但我尝试过的都没有。 ctx.fillStyle ='blue';但它可以改变所有物体的颜色。

可以在此处查看实时版本：

http://harlem-shake-it.com/tetris/

Answer 1

从这段代码中，我假设你只想让当前对象变成蓝色？

for (var y = 0; y < 4; ++y) {
    for (var x = 0; x < 4; ++x) {
        if (current[y][x]) {
            ctx.fillStyle = '#0068ff';
            drawBlock(currentX + x,currentY + y);
        }
    }
}

如果是这种情况，您需要先使用ctx.save();保存当前画布状态，使用fillStyle，绘制块，然后ctx.restore();。如果需要，这应该允许您用多种颜色填充块。或者，在这种情况下，将下降的块渲染为黑色。

您should also declare a doctype：<!doctype html>。并且the <center> tag is deprecated.您应该在CSS向前使用text-align: center;，或margin: 0 auto;，具体取决于您的样式。

数组上的fillStyle [HTML5 Canvas]

1 个答案: