Cómo agregar un Lienzo html5 dentro de un DIV

Estoy usando el siguiente código para generar un canvas. En el momento en que agrega el elemento canvas al body, ¿cómo puedo obtener que lo agregue a un div llamado "divGameStage", que no está anidado dentro de ningún otro elemento, excepto body.Cómo agregar un Lienzo html5 dentro de un DIV

EDIT: He intentado la primera sugerencia, pero no está apareciendo lienzo, código completo es el siguiente:

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

Fuente

2012-08-05 aSystemOverload

Posible duplicado de [Añadir lienzo a una página con javascript] (http://stackoverflow.com/questions/9152224/add-canvas-to-a-page-with-javascript) – Vadzim

Solo trata de este código y que funcionará para usted seguramente:

<!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>

Algunas cosas que tener en cuenta: cotizaciones 1. Error N ° 1 está ausente en loadCanvas ("divGameStage"); 2. El error n. ° 2 es el error de sintaxis div = document.getElementById (id); "..ID (id)" estaba en su código.

Si entonces también no trabaja entonces estoy seguro de que se está probando en Internet Explorer (especialmente < IE9) - Si esto es el caso, para tu información IE9 y por encima de la lona apoya ninguna otra versión es compatible con menor lienzo

¡Saludos!

Fuente

2012-08-06 07:52:26 GOK

Gracias por los consejos, ¡obviamente no estaba prestando atención a mis citas y casos! – aSystemOverload

Sólo hay que añadirlo a su <div> en lugar del cuerpo:

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

En pocas palabras :-)

Fuente

2012-08-05 12:38:38

Gracias, pero no ha aparecido ningún lienzo , He pegado el código actualizado, ¿estoy llamando a loadCanvas en el lugar equivocado o es algo más? – aSystemOverload

cuando dice que no aparece ¿ha revisado la fuente? Estoy bastante seguro de que el lienzo no será visible para ti hasta que lo dibujes en esta instancia. – 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>

Fuente

2012-08-05 12:42:58 timothyclifford

El único problema aquí es la siguiente:

loadCanvas(divGameStage);

Wrap divGameStage entre comillas:

loadCanvas("divGameStage");

ya que tiene que ser una cadena que se ejecute a través getElementById.

Fuente

2012-08-05 19:11:27 Purag

Cómo agregar un Lienzo html5 dentro de un DIV

Respuesta

Cuestiones relacionadas