Canvas HTML5 JS drawImage z-index

Question

我需要帮助，我正在为游戏创建城市地图，我创建了这个脚本，通过数组检索信息到结构的顺序，但我不能突出显示结构，我出现重叠，我会放一个Z-Index但是我不知道怎么做，请帮帮我。

var Canvas_Image_Arr = [{"name":"NAME1","Image":"../structure1.png","x":"439","y":"47","z":"3","w":"175","h":"179"},{"name":"NAME2","Image":"../structure2.png","x":"554","y":"175","z":"2","w":"175","h":"179"}];

window.onload = function(){
var canvas = document.getElementById("ctymap");
var ctx = canvas.getContext("2d");

ctx.canvas.width = 942;
ctx.canvas.height = 430;

canvas.style.background = "url(../background.jpg)";

Canvas_Image_Arr.forEach(function(element){
    var img = new Image();
    img.src = element.Image;
    this.zIndex = element.z;
    img.onload = function(){
        ctx.drawImage(this, element.x, element.y, this.width, this.height);
    }

});
}

在阵列＆＃34; CANVAS_IMAGE_ARR＆＃34;我为图层创建了一个名为Z的条目，因为我创建了每个drawImage的级别？

Answer 1

渲染ont​​op

最快的方法是使用两幅画布。一个保存整个图像并保持在屏幕外，另一个是显示画布。

您可以像往常一样将图像渲染到离屏画布。然后，当图像准备就绪时，清除屏幕画布，将屏幕外画布绘制到该画布上，然后在其上绘制突出显示的项目。

这样可以节省您对所有图像进行排序和重绘的工作，只需将其放在顶部即可。

实施例

演示显示了这一点。我没有找到一堆图像，而是通过画布创建图像。感兴趣的代码只是顶部函数displayLoop需要时它会找到最接近鼠标的图像，如果是新图像则清除画布，绘制offScreen画布，然后是最近的图像顶部。

注意：此方法会增加某些图像的边缘对比度。

requestAnimationFrame(displayLoop);
document.addEventListener("mousemove", mouseEvents);
const numImages = 100;
const ctx = canvas.getContext("2d");
const offScreen = createImage(512,true);
const offCtx = offScreen.getContext("2d");


var lastImage;
function displayLoop(){
   if (images.length === 0) { createAllImages() }
   if (mouse.update) {
     mouse.update = false;
     const img = images.getClosest(mouse.x, mouse.y);
     if(img !== lastImage) {
        ctx.clearRect(0,0,512,512);
        ctx.drawImage(offScreen,0,0);
        img.draw(ctx);
        lastImage = img;
     }
  }
   requestAnimationFrame(displayLoop);
}


   /* Code below is support code not related directly to the answer */
const mouse = {x : 0, y : 0, update : true};
function mouseEvents(e){
	const bounds = canvas.getBoundingClientRect();
	mouse.x = e.pageX - bounds.left - scrollX;
	mouse.y = e.pageY - bounds.top - scrollY;
  mouse.update = true;
}


function createAllImages(){
   var i = numImages;
   while(i--){ images.add() }
   images.draw(offCtx);
}
function createImage(size, noDraw = false){
  const img = document.createElement("canvas");
  img.width = size;
  img.height = size;  
  if (noDraw) { return img }
  const ctx = img.getContext("2d");
  ctx.lineWidth = 4;
  ctx.fillStyle = "#" + ((0x1000000+(Math.random() * 0xFFFFFF | 0)).toString(16).substr(1));
  ctx.beginPath();
  ctx.arc(size / 2, size / 2, size / 2 - 3, 0, Math.PI * 2);
  ctx.stroke();
  ctx.fill();
  return img;
}
const image = {
   pos : {x: 0, y: 0},
   img : null,
   init(){
      this.img = createImage(Math.random() * 64 + 64 | 0);
      this.pos ={  x :  Math.random() * canvas.height | 0, y : Math.random() * canvas.width | 0 };
      return this;
   },
   draw(ctx) { ctx.drawImage(this.img, this.pos.x- this.img.width / 2, this.pos.y-this.img.height / 2) },
   distTo(x, y) { return ((x - this.pos.x) ** 2 + (y - this.pos.y) ** 2) ** 0.5 }
}
const images = Object.assign([],{
  add() { this.push({...image}.init()) },
  each(cb) { var index = 0; for(const item of this) { cb(item,index++) } },
  getClosest(x, y) {
    var minDist = Infinity;
    var minIndex = -1;
    this.each((img, i) => {
       const dist = img.distTo(x, y);
       if(dist < minDist){
         minDist = dist;
         minIndex = i;
       }
     });
     return this[minIndex];
  },
  draw(ctx){ this.each(img=>img.draw(ctx)) }
})

<canvas id="canvas" width="512" height="512"></canvas>