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

【问题标题】：Sprites above sprites or Canvas as HTML background精灵上方的精灵或画布作为 HTML 背景
【发布时间】：2020-04-07 06:44:32
【问题描述】：

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

这是 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 操作。谢谢！

【问题讨论】：

标签： javascript html canvas sprite

【解决方案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); 
  }
}

&lt;canvas width=200 height=200&gt;

如果您打算使用图像，一个简单的选择是使用 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();

&lt;canvas id=canvas width=500 height=500&gt;&lt;/canvas&gt;

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

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);

&lt;canvas width=200 height=200&gt;

您可以看到我将双循环示例转换为我们每次绘制时调用的函数

【讨论】：