Come aggiungere un CANVAS html5 all'interno di un DIV

Sto utilizzando il codice seguente per generare un canvas. Al momento aggiunge l'elemento canvas allo body, come posso ottenerlo per aggiungerlo a un div denominato "divGameStage", che non è annidato all'interno di nessun altro elemento, ad eccezione di body.Come aggiungere un CANVAS html5 all'interno di un DIV

EDIT: ho provato il primo suggerimento, ma nessuna tela sta comparendo, il codice completo è il seguente:

<head> 
<meta charset="utf-8"> 
<title>Game Stage</title> 
<script type="text/javascript"> 
    function loadCanvas(id) { 
     var canvas = document.createElement('canvas'); 
     div = document.getElementByID(id); 
     canvas.id  = "CursorLayer"; 
     canvas.width = 1224; 
     canvas.height = 768; 
     canvas.style.zIndex = 8; 
     canvas.style.position = "absolute"; 
     canvas.style.border = "1px solid"; 
     div.appendChild(canvas) 
    } 
     </script> 
</head> 
<body> 
<header> 
    <h1>The most important heading on this page</h1> 
    <p>With some supplementary information</p> 
</header> 
<div id="divControls"></div> 
<div id="divGameStage"></div> 
<script type="text/javascript"> 
    loadCanvas(divGameStage); 
</script> 
</body> 
</html>

fonte

2012-08-05 aSystemOverload

Possibile duplicato di [Aggiungi canvas a una pagina con javascript] (http://stackoverflow.com/questions/9152224/add-canvas-to-a-page-with-javascript) – Vadzim

Basta provare questo codice e lavorerà per voi sicuramente:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Game Stage</title> 
<script type="text/javascript"> 
    function loadCanvas(id) { 
     var canvas = document.createElement('canvas'); 
     div = document.getElementById(id); 
     canvas.id  = "CursorLayer"; 
     canvas.width = 1224; 
     canvas.height = 768; 
     canvas.style.zIndex = 8; 
     canvas.style.position = "absolute"; 
     canvas.style.border = "1px solid"; 
     div.appendChild(canvas) 
    } 
     </script> 
</head> 
<body> 
<header> 
    <h1>The most important heading on this page</h1> 
    <p>With some supplementary information</p> 
</header> 
<div id="divControls"></div> 
<div id="divGameStage"></div> 
<script type="text/javascript"> 
    loadCanvas("divGameStage"); 
</script> 
</body> 
</html>

Alcune cose tenere a mente: citazioni 1. Errore No 1 manca in loadCanvas ("divGameStage"); 2. Errore n. 2 errore di sintassi div = document.getElementById (id); "..ID (id)" era nel tuo codice.

Se poi anche doesnt lavoro poi sono sicuro che si sta verificando su Internet Explorer (specialmente < IE9) - Se questi è il caso, FYI IE9 e soprattutto supporta tela non ci sono altre versioni meno supporta tela

Saluti !!!

fonte

2012-08-06 07:52:26 GOK

Grazie per i suggerimenti, ovviamente non stavo prestando attenzione alle mie quotazioni e al caso! – aSystemOverload

Basta aggiungerlo al vostro <div> al posto del corpo:

<script type="text/javascript"> 
    function loadCanvas(id) { 
     var canvas = document.createElement('canvas'), 
      div = document.getElementById(id); 
     canvas.id  = "canvGameStage"; 
     canvas.width = 1000; 
     canvas.height = 768; 
     canvas.style.zIndex = 8; 
     canvas.style.position = "absolute"; 
     canvas.style.border = "1px solid"; 
     div.appendChild(canvas); 
    } 
    /* ... */ 
    loadCanvas("divGameStage"); 
</script>

Molto semplicemente :-)

fonte

2012-08-05 12:38:38

Grazie, ma non è stata visualizzata alcuna tela , Ho incollato il codice aggiornato, sto chiamando loadCanvas nel posto sbagliato o è qualcos'altro? – aSystemOverload

quando dici di non apparire hai controllato la fonte? Sono abbastanza sicuro che la tela non sarà visibile a te fino a quando non disegni su di essa in questa istanza. – Stuart

<script type="text/javascript"> 
    function loadCanvas() { 
     var canvas = document.createElement('canvas'); 
     canvas.id  = "canvGameStage"; 
     canvas.width = 1000; 
     canvas.height = 768; 
     canvas.style.zIndex = 8; 
     canvas.style.position = "absolute"; 
     canvas.style.border = "1px solid"; 
     var div = document.createElement("div"); 
     div.className = "divGameStage"; 
     div.appendChild(canvas); 
     document.body.appendChild(div) 
    } 
</script>

fonte

2012-08-05 12:42:58 timothyclifford

L'unico problema è questo:

loadCanvas(divGameStage);

Wrap divGameStage tra virgolette:

loadCanvas("divGameStage");

Dal momento che deve essere una stringa da eseguire mediante getElementById.

fonte

2012-08-05 19:11:27 Purag

Come aggiungere un CANVAS html5 all'interno di un DIV

risposta

Problemi correlati