Probleme mit HTML-Canvas?

Question

Okay, also ich folge einem Tutorial von W3Schools und ich versuche, diese Leinwand in ein div. Problem ist, es geht immer wieder zum Anfang des Körpers zurück? Ich habe versucht, einen Teil des Codes zu ändern, aber ich kann es einfach nicht richtig machen! Gibt es irgendeine Chance, dass jemand etwas Licht erhellt? Ich versuche, es in ein div namens "GameCanvas" zu setzen, aber ich habe den Code eingefügt, der funktioniert.

var myGamePiece; 
var myObstacles = []; 
var myScore; 

function startGame() { 
    myGamePiece = new component(30, 30, "red", 10, 120); 
    myScore = new component("30px", "Consolas", "black", 280, 40, "text"); 
myGameArea.start(); 
} 

var myGameArea = { 
    canvas : document.createElement("canvas"), 
start : function() { 
    this.canvas.width = 480; 
    this.canvas.height = 270; 
    this.context = this.canvas.getContext("2d"); 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    this.frameNo = 0; 
    this.interval = setInterval(updateGameArea, 20); 
    }, 
clear : function() { 
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
}, 
stop : function() { 
    clearInterval(this.interval); 
} 
} 

Vielen Dank im Voraus!

Answer 1

Ist document.body.childNodes[0] der Div, den Sie versuchen, die Leinwand einzuwickeln?

Sie fügen Ihre Leinwand derzeit vor dem div (insertBefore) ein, anstatt darin. Sie können document.body.childNodes[0].appendChild(this.canvas) verwenden, um die Zeichenfläche als untergeordnetes Element zum div hinzuzufügen.

Edit:

Wissen, dass die div Sie zu anhängen versuchen, die ID hat gameCanvas Folgendes sollte funktionieren:

ersetzen document.body.insertBefore(this.canvas, document.body.childNodes[0]) in Ihrem ursprünglichen Code mit document.getElementById('gameCanvas').appendChild(this.canvas).