Cách thêm CANVAS html5 trong DIV

Tôi đang sử dụng mã bên dưới để tạo số canvas. Tại thời điểm này, thêm phần tử canvas vào body, làm cách nào để thêm nó vào một tên "divGameStage" có tên là "divGameStage", không được lồng trong bất kỳ phần tử nào khác, ngoại trừ body.Cách thêm CANVAS html5 trong DIV

EDIT: Tôi đã thử các gợi ý đầu tiên, nhưng không có vải đang xuất hiện, mã đầy đủ như sau:

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

Nguồn

2012-08-05 aSystemOverload

Bản sao có thể có của [Thêm canvas vào trang có javascript] (http://stackoverflow.com/questions/9152224/add-canvas-to-a-page-with-javascript) – Vadzim

Chỉ cần thử mã này và sẽ làm việc cho bạn chắc chắn:

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

Một số điều cần lưu ý: dấu ngoặc kép 1. Lỗi số 1 là mất tích trong loadCanvas ("divGameStage"); 2. Lỗi số 2 là lỗi cú pháp div = document.getElementById (id); "..ID (id)" nằm trong mã của bạn.

Nếu sau đó cũng nó không làm việc thì tôi chắc chắn rằng bạn đang thử nghiệm nó trên trình duyệt Internet Explorer (đặc biệt < IE9) - Nếu những trường hợp này, FYI IE9 trở lên hỗ trợ canvas không có phiên bản khác ít hỗ trợ canvas

Chúc mừng !!!

Nguồn

2012-08-06 07:52:26 GOK

Cảm ơn những lời khuyên, tôi rõ ràng đã không chú ý đến báo giá và trường hợp của tôi! – aSystemOverload

Bạn chỉ cần thêm nó vào <div> của bạn thay vì cơ thể:

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

Rất đơn giản :-)

Nguồn

2012-08-05 12:38:38

Cảm ơn, nhưng không có canvas nào xuất hiện , Tôi đã dán mã cập nhật, tôi gọi loadCanvas ở sai chỗ hay là cái gì khác? – aSystemOverload

khi bạn nói không xuất hiện có bạn đã kiểm tra nguồn? Tôi chắc chắn rằng canvas sẽ không hiển thị cho bạn cho đến khi bạn vẽ nó trong trường hợp này. – 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>

Nguồn

2012-08-05 12:42:58 timothyclifford

vấn đề duy nhất ở đây là thế này:

loadCanvas(divGameStage);

Bọc divGameStage trong dấu ngoặc kép:

loadCanvas("divGameStage");

Kể từ khi nó cần phải được một chuỗi để được chạy qua getElementById.

Nguồn

2012-08-05 19:11:27 Purag

Cách thêm CANVAS html5 trong DIV

Trả lời

Các vấn đề liên quan