HTML Canvas绘图时如何让车辆元素覆盖在停车场标线上方

问题根因 #

HTML Canvas的绘制遵循后绘制的内容层级更高的规则，新绘制的内容会直接覆盖在已有内容上方。你当前所有帧绘制逻辑的顺序是：清屏→绘制车辆→调用parkinglot()绘制停车场标线，标线自然会覆盖在车辆上方，你想调整层级的思路是对的，只是搞反了执行顺序。

修复方案 #

你只需要把所有绘制函数的执行顺序调整，每帧按「清屏→绘制停车场→绘制车辆」的顺序执行即可，以draw函数为例，修改后代码如下：

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 第一步先画停车场标线
  parkinglot();
  // 第二步再画车辆，就会显示在标线上方
  ctx.beginPath();
  ctx.rect(x, y, 110,65);
  ctx.rect(x + 5, y + 58, 30,10);
  ctx.rect(x + 75, y + 58, 30,10)
  ctx.rect(x + 5, y - 3, 30,10);
  ctx.rect(x + 75, y -3, 30,10)
  ctx.fillStyle = "#000000";
  ctx.fill();
  x += 5;
  animate = requestAnimationFrame(draw);
  if (x > 500) {
    GameOver();
  }
  document.getElementById("speedbar").innerHTML = '5';
};

剩下的mouseRightDown、mouseLeftDown、mouseReverseDown三个交互绘制函数同理，都把parkinglot()调用移动到车辆绘制代码的前面即可生效。

优化建议 #

• 代码里重复声明了多次canvas和ctx全局变量，全局只需要声明一次即可，重复声明可能带来性能损耗和未知逻辑异常
• 四个绘制函数里的车辆绘制代码完全一致，可以直接复用你已经写好的cars函数，传入坐标参数调用即可，不需要重复写相同的绘制逻辑，后续修改车辆样式也只需要改一次。

内容的提问来源于stack exchange，提问作者user16308564