javascript - 将 id 赋予 Canvas

Question

我有它，这样当您(PaintBrush)完成时，一切都会清除并出现一个按钮。单击该按钮时，它开始二级，在这里它创建一个新的 Canvas 。我添加了一些代码，以便在单击按钮时删除旧 Canvas ，然后制作新 Canvas 。但是，这需要 Canvas 有一个 id。我如何获得此代码:

canvas: document.createElement("canvas"),

还要为它包含一个 ID？我不能让它说 var canvas = blah blah 然后 canvas.id = " Canvas ";因为我设置它的方式。

P.S 如果您需要知道，删除代码是这样的:

Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
    if(this[i] && this[i].parentElement) {
        this[i].parentElement.removeChild(this[i]);
    }
}
}

在按钮的“点击”功能区域中，我把这个用于删除:

document.getElementById("canvas").remove();

求助!提前致谢!

编辑:这里有一些额外的代码可以提供帮助，它是 PaintBrush 完成时发生的事情:

else if (PaintBrush.crashWith(Finish)) {
  PaintBrush.y = 50;
var button = document.createElement("button");
button.innerHTML = "Level 3";
button.id = "button-2";  // add the id to the button
document.body.appendChild(button); // append to body
GameArena2.clear();
GameArena2.stop();
button.addEventListener ("click", function() {
startGame2();
document.getElement("canvas").remove();
document.getElementById("button-2").remove();
});

编辑 2:游戏 Canvas 代码:

var GameArena2 = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 1280;
    this.canvas.height = 480;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea2, 20);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop: function() {
    clearInterval(this.interval);
  },
  drawGameOver: function() {
    ctx2 = GameArena2.context;
        ctx2.fillStyle = "rgba(0,0,0,"+fader +")";
        ctx2.fillRect(0,0,GameArena2.width,GameArena2.height);
        drawStatic(fader/2);
        fader += .1 * 1/fps
        ctx2.fillStyle = "rgba(255,255,255," + fader + ")";
        ctx2.font = "72px sans-serif";
        ctx2.fillText("GAME OVER",GameArena2.width/2 - 220,GameArena2.height/2);
    }
}
function everyinterval(n) {
  if ((GameArena.frameNo / n) % 1 == 0) {
    return true;
  }
  else if ((GameArena.frameNo / n) % 1 == 0) {
    return true;
  }
  return false;
}

Answer 1

我认为最好的方法是像这样创建一个静态函数:

function createElementOnDom (type,id) {
   var element=document.createElement(type);
   element.id=id;
   return element;
}

console.log(createElementOnDom('CANVAS','myId'));

因此，您可以根据需要使用简单的单行函数调用简单地创建 Canvas 并为其添加特定的 ID。

我只知道一种在 jQuery 上直接执行此操作的方法，您不会喜欢使用它。

只是你需要这样做:

function createElementOnDom (type,id) {
       var element=document.createElement(type);
       element.id=id;
       return element;
    }

var GameArena2 = {
  canvas: createElementOnDom('CANVAS','myId'),