在 Javascript 中将 canvas 分成 100 份

Question

所以，我想将 canvas 分成 100 个 50x50px 的正方形，并且我想用尽可能少的代码来完成。我开始用 for 循环制作它，但我需要 10 个 for 循环。我想知道是否有一种更快的方法使用一个 for 循环

这是代码

let canvas = document.querySelector("canvas");
canvas.width = 500;
canvas.height = 500;
let c = canvas.getContext("2d");

let x = 0;
let y = 0;
for(let i = 0; i < 10; i++)
{
    if (i==0)
    {
        c.beginPath();
        c.moveTo(0, 50);
        c.lineTo(50, 50);
        c.lineTo(50, 0);
        c.stroke();
    }
    x += 50;
    c.beginPath();
    c.moveTo(x, 50);
    c.lineTo(x + 50, 50);
    c.lineTo(x + 50, 0);
    c.stroke();
}
x = 0;
y = 0;
for(let i = 0; i < 10; i++)
{
    if (i==0)
    {
        c.beginPath();
        c.moveTo(0, 100);
        c.lineTo(50, 100);
        c.lineTo(50, 50);
        c.stroke();
    }
    x += 50;
    c.beginPath();
    c.moveTo(x, 100);
    c.lineTo(x + 50, 100);
    c.lineTo(x + 50, 0);
    c.stroke();
}

Answer 1

把绘图部分放在一个函数里，循环一次，像这样：

let canvas = document.querySelector("canvas");
canvas.width = 501;
canvas.height = 501;
let c = canvas.getContext("2d");

function draw(X, Y, x, y) {
  c.beginPath();
  c.moveTo(X, Y);
  c.lineTo(x, y);
  c.stroke();
}
for (let n = 0.5; n < 501; n += 50) {
  draw(n, 0, n, 500);
  draw(0, n, 500.5, n);
}

<canvas></canvas>

注意，我从 0.5 开始循环，这会将线条“居中”到 canvas 像素，使网格更清晰。

在 Javascript 中将 canvas 分成 100 份

Split canvas into 100 pieces in Javascript

javascript

html

canvas