Question

如何用交替颜色填充网格，用一种颜色填充奇数单元格，甚至用另一种颜色填充单元格。

目前我正在使用此代码创建网格：

var ctx = canvas.getContext('2d'),
    columns = 6,
    rows = 4,
    w, h, tileWidth, tileHeight;
    console.log(canvas);

canvas.onresize = calcSize;
canvas.onmousemove = highlight;

以下是代码，目前只有鼠标悬停可激活背景颜色。

JSFIDDLE

Answer 1

假设你想要一个像样式（奇数/偶数）的棋盘，你可以这样做：

for (var i = 0; i < rows; i++) {
     for (var u = 0; u < columns; u++) {
        ctx.fillStyle = (i + u) % 2 == 0 ? '#eee' : '#aaa';
        ctx.fillRect(u * tileWidth, i * tileHeight, tileWidth, tileHeight);
     }
}

以下是更新后的fiddle。 ^{（有一些额外的修复）}

填充奇怪甚至在画布上反应

1 个答案: