Jak dodać CANVAS html5 w DIV

Używam poniższego kodu do generowania canvas. W tej chwili dodaje element canvas do body, w jaki sposób mogę go uzyskać, aby dodać go do div o nazwie "divGameStage", który nie jest zagnieżdżony w żadnych innych elementach, z wyjątkiem body.Jak dodać CANVAS html5 w DIV

EDIT: Próbowałem pierwszą propozycję, ale nie pojawia się na płótnie, pełny kod jest w następujący sposób:

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

Źródło

2012-08-05 aSystemOverload

Możliwy duplikat [Dodaj kanwę do strony z javascript] (http://stackoverflow.com/questions/9152224/add-canvas-to-a-page-with-javascript) – Vadzim

prostu spróbuj tego kodu i będzie pracować dla Ciebie na pewno:

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

pewne rzeczy pamiętać: 1. Błąd nr 1 brakuje cytaty w loadCanvas („divGameStage”); 2. Błąd nr 2 jest błędem składni div = document.getElementById (id); "..ID (id)" było w twoim kodzie.

Jeśli wtedy również nie robi pracy to jestem pewien, że testują go na Internet Explorer (specjalnie < IE9) - Jeśli to jest przypadek, FYI IE9 i powyżej obsługuje płótno żadna inna mniejsza wersja obsługuje płótno

Pozdrawiam !!!

Źródło

2012-08-06 07:52:26 GOK

Dzięki za porady, oczywiście nie zwracałem uwagi na moje cytaty i sprawy! – aSystemOverload

Po prostu trzeba dołączyć go do swojej <div> zamiast ciała:

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

prostu :-)

Źródło

2012-08-05 12:38:38

Dzięki, ale nie pojawiło się płótno Wkleiłem zaktualizowany kod, czy wywołuję loadCanvas w niewłaściwym miejscu, czy jest to coś innego? – aSystemOverload

kiedy mówisz, że się nie pojawi, czy sprawdziłeś źródło? Jestem prawie pewien, że płótno nie będzie dla ciebie widoczne, dopóki nie narysujesz go w tym przypadku. – 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>

Źródło

2012-08-05 12:42:58 timothyclifford

jedynym problemem tutaj jest to:

loadCanvas(divGameStage);

Wrap divGameStage w cudzysłowie:

loadCanvas("divGameStage");

ponieważ musi być ciągiem być prowadzony przez getElementById.

Źródło

2012-08-05 19:11:27 Purag

Jak dodać CANVAS html5 w DIV

Odpowiedz

Powiązane problemy