如何在DIV中添加html5帆布

我正在使用下面的代碼來生成canvas。目前它將畫布元素添加到body，我如何才能將它添加到名爲「divGameStage」的div，該元素不嵌套在除body之外的任何其他元素中。如何在DIV中添加html5帆布

編輯：我嘗試的第一個建議，但沒有畫布出現，完整的代碼如下：

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

來源

2012-08-05 aSystemOverload

[將canvas添加到使用javascript的頁面]可能的副本（http://stackoverflow.com/questions/9152224/add-canvas-to-a-page-with-javascript） – Vadzim 2016-06-04 13:06:04

剛剛嘗試這個代碼，並會爲你工作肯定：

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

有些事情要記住： 1.錯誤1號缺失報價在loadCanvas（「divGameStage」）; 2.錯誤否2是語法錯誤div = document.getElementById（id）; 「..ID（id）」在您的代碼中。

如果然後還要它不工作，那麼我相信你是在Internet Explorer（特別< IE9）測試它 - 如果這是這樣，僅供參考IE9及以上支持的畫布沒有其他更小的版本支持帆布

乾杯！

來源

2012-08-06 07:52:26 GOK

感謝提示，我顯然沒有注意到我的報價和案例！ – aSystemOverload 2012-08-25 15:01:46

你只需把它附加到<div>，而不是身體：

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

很簡單:-)

來源

2012-08-05 12:38:38

謝謝，但沒有畫布出現，我粘貼了更新的代碼，我是否在錯誤的地方調用了loadCanvas，或者是其他的東西？ – aSystemOverload 2012-08-05 19:08:22

當你說沒有出現你檢查了源？我很肯定，在這個例子中，畫布不會被你看到。 – Stuart 2012-08-05 19:27:22

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

來源

2012-08-05 12:42:58 timothyclifford

這裏唯一的問題是這樣的：

loadCanvas(divGameStage);

裹divGameStage引號：

loadCanvas("divGameStage");

因爲它需要通過getElementById運行的字符串。

來源

2012-08-05 19:11:27 Purag

如何在DIV中添加html5帆布

回答

相關問題