填充样式的阵列[HTML5画布]

我有这样的：填充样式的阵列[HTML5画布]

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/

来源

2013-04-23 MortenMoulder

我假设你想让每个形状具有不同的颜色。看起来你已经编码了你的形状，在它们倒下之后被合并到棋盘中。要以不同的颜色着色每一个形状，你必须确定板上的每个“完成”块都被赋予它的形状颜色。这样，当你绘制“完成”块时，你可以设置适当的填充颜色。 – markE 2013-04-23 21:28:38

从这个代码，我假设你只希望当前对象是蓝色的？

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();，使用填充样式，画的块，然后ctx.restore();。如果需要，这应该允许您用多种颜色填充块。或者，在这种情况下，倒下的块会变成黑色。

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

来源

2013-04-24 02:39:31

像现在这样？去看看：http://harlem-shake-it.com/tetris/js/tetris.js 搜索ctx.restore – MortenMoulder 2013-04-24 06:16:37

更多类似这样的渲染（）函数： \t \t \t \t ctx.save（）; \t \t \t \t ctx.fillStyle = '＃0068ff'; \t \t \t \t drawBlock（currentX + X，currentY + Y）; \t \t \t \t ctx.restore（）; – 2013-04-24 10:28:26

由于您实际上没有绘制保存/恢复的任何块，因此它们的颜色信息从不保存。您必须添加知道块的信息，并且可以在渲染功能中每次提取其颜色。因此，不要在整个板上进行迭代并重新绘制它，只需在对象下降后使用第二个画布进行移动，或者只清除掉落的形状。 – 2013-04-24 10:45:21

填充样式的阵列[HTML5画布]

回答

相关问题