HTML5 画布棋盘格纹理

Question

我正在尝试创建一个复古像素化的背景画。 "像素"的x和y位置分别是奇数和偶数。这对于分辨率（res变量）为4似乎有效，然后％运算符似乎不起作用。

function drawPixelatedBackground()
{
    var res = 5;

    for (var x=0; x<settings.width/res;x++ )
    { 
        for (var y=0;y<settings.height/res;y++)
        {
            if ( (x%2==0) && (y%2==0) )
            {
                nx = x * (settings.width/res);
                ny = y * (settings.width/res);
                ctx.fillStyle= settings.colors.Fill;
                ctx.fillRect(nx,ny, nx+  (settings.width/res),ny+   (settings.height/res) );
            }

        }
    }
}

- skoumas

---

请看这里。我同意你可以看到的图案很漂亮。但是我想要的只是一个矩阵棋盘样式。 http://jsfiddle.net/zwuLcntj/ - skoumas

Answer 1

你的逻辑有一些小问题。我下面会解释我的思路。

http://jsfiddle.net/2eee9moq/2/

function drawCheckeredBackground(can, nRow, nCol) {
    var ctx = can.getContext("2d");
    var w = can.width;
    var h = can.height;

    nRow = nRow || 8;    // default number of rows
    nCol = nCol || 8;    // default number of columns

    w /= nCol;            // width of a block
    h /= nRow;            // height of a block

    for (var i = 0; i < nRow; ++i) {
        for (var j = 0, col = nCol / 2; j < col; ++j) {
            ctx.rect(2 * j * w + (i % 2 ? 0 : w), i * h, w, h);
        }
    }

    ctx.fill();
}

var canvas = document.getElementById("canvas");

drawCheckeredBackground(canvas);

<canvas id="canvas" width="300" height="300"></canvas>

• 嵌套的for循环在一行中绘制块。
• • 2 * j * w + (i % 2 ? 0 : w)每隔一行移动每个块的x坐标。

- user2570380

---

非常不错，流畅而聪明。谢谢。点赞。我会保留其他功能来创建波斯地毯 :) - skoumas

Answer 2

循环遍历行和列的方法如下：

for (let column = 0; column < board.columns; column++) {
  for (let row = 0; row < board.rows; row++) {

  }
}

如果满足以下任一条件，则通过绘制矩形来创建棋盘图案：

• 行数为偶数且列数为奇数
• 行数为奇数且列数为偶数

在代码中：

if (row % 2 === 0 && column % 2 === 1 || row % 2 === 1 && column % 2 === 0) {
  canvas.context.rect(
    column * column_width,
    row * row_height,
    column_width,
    row_height
  );
}

const canvas = {
  element: document.querySelector("canvas"),
  context: document.querySelector("canvas").getContext('2d')
}

const board = {
  rows: 15,
  columns: 17,
  colors: {
    light: '#a3cf53',
    dark: '#abd55a'
  }
}

canvas.context.beginPath();
canvas.context.fillStyle = board.colors.dark;
canvas.context.rect(0, 0, canvas.element.width, canvas.element.height);
canvas.context.fill();

canvas.context.beginPath();
canvas.context.fillStyle = board.colors.light;
for (let column = 0; column < board.columns; column++) {
  for (let row = 0; row < board.rows; row++) {
    if (row % 2 === 0 && column % 2 === 1 || row % 2 === 1 && column % 2 === 0) {
      canvas.context.rect(
        column * canvas.element.width / board.columns,
        row * canvas.element.height / board.rows,
        canvas.element.width / board.columns,
        canvas.element.height / board.rows
      );
    }
  }
}
canvas.context.fill();

body {
  margin: 0;
}

<canvas width="595" height="525"></canvas>

- Raphael Rafatpanah

Answer 3

为了交替着色正方形，我们可以利用对角线上的正方形，例如(1,1)，(2,2)，(3,3)等，它们将是相同颜色，比如白色，而(1,2)，(2,3)，(3,4)等则是相同颜色，比如黑色。我们注意到这里有一个模式，即在(col, row)中，如果col和row都是偶数或都是奇数，则正方形具有相同的颜色（白色），否则它们具有其他颜色（黑色）。

代码逻辑：

if ((i % 2 == 0 && j % 2 == 0) || (i % 2 != 0 && j % 2 != 0)){
    square is white/color1
}
else{
    square is black/color2
}                   
     

const board = document.getElementById("board")
const ctx = board.getContext("2d")

let cols = 8 
let rows = 8
let squareSize = 50

function drawCheckeredBoard(ctx, squareSize, rows, cols) {
    let whiteSquareColor = "#ffe6cc"
    let blackSquareColor = "#cc6600"

    for (let j = 0; j < rows; j++)
        for (let i = 0; i < cols; i++) {
            if ((i % 2 == 0 && j % 2 == 0) || (i % 2 != 0 && j % 2 != 0)) 
                ctx.fillStyle = whiteSquareColor
            else ctx.fillStyle = blackSquareColor
            ctx.fillRect(i * squareSize, j * squareSize, squareSize, squareSize)
        }
}

drawCheckeredBoard(ctx, squareSize, rows, cols)

<canvas id="board" width="400" height="400">

- Manik