我突然想到要使用 JS 和 Canvas 绘制棋盘,并且我有这段代码可以使用 for
循环绘制方框。
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var x, y,
boxWidth = 30,
boxHeight = 30;
for (x = 0; x < canvas.width; x += boxWidth) {
for (y = 0; y < canvas.height; y += boxHeight) {
ctx.beginPath();
ctx.rect(x, y, boxWidth, boxHeight);
ctx.stroke();
ctx.closePath();
}
}
<canvas id="canvas" width="240" height="240"></canvas>
现在我想知道如何访问轴上的每个奇数框以更改它们的填充颜色(例如黑色、白色、黑色、白色等)。
我知道使用全局变量不是最好的方法,但这是一个非常小的项目,我只想了解一些关于如何交替棋盘颜色的逻辑。非常感谢您的帮助!
最佳答案
您也可以尝试只将您的值增加 1(而不是 boxWidth
),这样可以更简单地检查它们是偶数还是奇数。然后,您需要缩放或乘以 boxWidth
和 boxHeight
:
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var x, y,
boxWidth = 30,
boxHeight = 30;
var numbRows = Math.floor(canvas.width / boxWidth),
numbCols = Math.floor(canvas.height / boxHeight);
ctx.save();
ctx.scale(boxWidth, boxHeight);
for (x = 0; x < numbRows; x++) {
for (y = 0; y < numbCols; y++) {
if ((x+y) % 2 == 0) ctx.fillStyle = 'white';
else ctx.fillStyle = 'black';
ctx.beginPath();
ctx.rect(x, y, boxWidth, boxHeight);
ctx.stroke();
ctx.closePath();
}
}
ctx.restore();
关于javascript - 如何使用 Canvas 在 JS 中更改棋盘的每个框的填充颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45254429/