精灵上方的精灵或画布作为HTML背景

Question

我计划使用画布中精灵的坐标，通过将画布作为背景图像来制作棋盘游戏。

这是8x8板的js代码。

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.fillStyle = "#ffb933";
c.fillRect(0,0,100,100);
c.fillRect(200,0,100,100);
c.fillRect(400,0,100,100);
c.fillRect(600,0,100,100);
c.fillRect(100,100,100,100);
c.fillRect(300,100,100,100);
c.fillRect(500,100,100,100);
c.fillRect(700,100,100,100);
c.fillRect(0,200,100,100);
c.fillRect(200,200,100,100);
c.fillRect(400,200,100,100);
c.fillRect(600,200,100,100);
c.fillRect(100,300,100,100);
c.fillRect(300,300,100,100);
c.fillRect(500,300,100,100);
c.fillRect(700,300,100,100);
c.fillRect(0,400,100,100);
c.fillRect(200,400,100,100);
c.fillRect(400,400,100,100);
c.fillRect(600,400,100,100);
c.fillRect(100,500,100,100);
c.fillRect(300,500,100,100);
c.fillRect(500,500,100,100);
c.fillRect(700,500,100,100);
c.fillRect(0,600,100,100);
c.fillRect(200,600,100,100);
c.fillRect(400,600,100,100);
c.fillRect(600,600,100,100);
c.fillRect(100,700,100,100);
c.fillRect(300,700,100,100);
c.fillRect(500,700,100,100);
c.fillRect(700,700,100,100);

有没有什么方法可以让它成为我的html文件的背景图像，这样我仍然可以使用相同的坐标，并在上面制作新的精灵，我也可以用js进行操作。谢谢

Answer 1

您可以显著减少
这只是几个循环和一个条件

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.fillStyle = "#ffb933";
size = 20
for (i = 0; i < 8; i++) {
for (j = 0; j < 8; j++) {
if ((i + j) % 2 != 0)
c.fillRect(i * size, j * size, size, size); 
}
}

<canvas width=200 height=200>

如果你打算使用图像，一个简单的选项是使用SVG图像
我从wikimedia得到了这个：
https://upload.wikimedia.org/wikipedia/commons/7/70/Checkerboard_pattern.svg

function svgimage() {
var image = `
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 5 5">
<rect width="5" height="5"/>
<path d="M0,0V5H1V0zM2,0V5H3V0zM4,0V5H5V0zM0,0H5V1H0zM0,2H5V3H0zM0,4H5V5H0z" fill="#fff" fill-rule="evenodd"/>
</svg>`;
return encodeURIComponent(image);
}
function drawImage() {
ctx.drawImage(img, 0, 0, 500, 500);
}
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = drawImage
img.src = 'data:image/svg+xml;charset=utf-8,' + svgimage();

<canvas id=canvas width=500 height=500></canvas>

---

你可以在上面画任何你喜欢的东西，这里有一个例子：

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.globalAlpha = 0.5
function drawBoard() {
c.beginPath()
c.fillStyle = "#ffb933";
size = 20
for (i = 0; i < 8; i++) {
for (j = 0; j < 8; j++) {
if ((i + j) % 2 != 0)
c.fillRect(i * size, j * size, size, size);
}
}
}
delta = 0
function draw() {
c.clearRect(0, 0, canvas.width, canvas.height)
drawBoard()
delta += 0.05
x = Math.sin(delta) * 40 + 80
y = Math.cos(delta) * 20 + 60
c.beginPath()
c.fillStyle = "#ff0000";
c.arc(x, y, 10, 0, 2 * Math.PI);
c.fill()
}
setInterval(draw, 20);

<canvas width=200 height=200>

你可以看到，我将双环示例转换为一个函数，每次绘制时都会调用该函数