javascript - Give id to a canvas - Stack Overflow

admin管理员组

文章数量:1418717

I have it so that when you (the PaintBrush) hit the finish everything clears and a button appears. When the button is clicked it starts level two, here it creates a new canvas. I've added some code so that when the button is clicked the old canvas is deleted, then the new one is made. However, this requires the canvas to have an id. how do i get this code:

canvas: document.createElement("canvas"),

To also include an id for it? I cannot have it say var canvas = blah blah and then have canvas.id = "canvas"; because of the way i have it set up.

P.S the remove code is this if you need to know:

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

and in the button "click" function area i put this for the remove:

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

Please help! Thanks in Advance!

EDIT: Here is some extra code to help, it is what occurs when the PaintBrush hits the finish:

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

EDIT 2: Game canvas code:

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

I have it so that when you (the PaintBrush) hit the finish everything clears and a button appears. When the button is clicked it starts level two, here it creates a new canvas. I've added some code so that when the button is clicked the old canvas is deleted, then the new one is made. However, this requires the canvas to have an id. how do i get this code:

canvas: document.createElement("canvas"),

To also include an id for it? I cannot have it say var canvas = blah blah and then have canvas.id = "canvas"; because of the way i have it set up.

P.S the remove code is this if you need to know:

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

and in the button "click" function area i put this for the remove:

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

Please help! Thanks in Advance!

EDIT: Here is some extra code to help, it is what occurs when the PaintBrush hits the finish:

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

EDIT 2: Game canvas code:

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

• javascript
• canvas

Share Improve this question Follow edited Feb 28, 2017 at 17:32 TechEndling asked Feb 28, 2017 at 17:09 TechEndlingTechEndling 7633 silver badges1313 bronze badges 2

• can you use jquery? have you possibilities to create a static function to use? – LellisMoon Commented Feb 28, 2017 at 17:13
• I'd prefer not to use jquery – TechEndling Commented Feb 28, 2017 at 17:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I think the best way is to create a static function like this:

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

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

So you can simply create the canvas adding it his specific id using a simple single row function call like you need.

I only know a way to do direcly this on jQuery, that you wouldn't like to use.

simply you need to do that:

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

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

Simple! Just assign it immediately after the GameArena2 object is created.

var GameArena2 = {
    canvas: document.createElement("canvas"),
    start: function() { 
      ...
      ...        
}

// give id to a canvas
GameArena2.canvas.id = "GameArena2";

function everyinterval(n) {
    if ((GameArena.frameNo / n) % 1 == 0) { 
        ...
        ...        
}

本文标签： javascriptGive id to a canvasStack Overflow