Разместить элементы на холсте, используя JavaScript

Question

Я делаю небольшую игру. Я поместил некоторые div -tags в canvas -tag по JavaScript. Это мой код:

document.addEventListener("DOMContentLoaded", function() { 
 
    init(); 
 
}); 
 

 
function init(){ 
 
    draw(); 
 
} 
 

 
function draw(){ 
 

 
    var number = Math.round((Math.random() * 31) + 20); 
 
    var cnv = document.getElementsByTagName("canvas")[0]; 
 

 
    for (i = 0; i <= number ; i++){ 
 

 
     var div = document.createElement('div'); 
 

 
     //breedte 
 
     var length = Math.round((Math.random() * 31) + 20); 
 
     div.style.height = length + "px"; 
 
     div.style.width = length + "px"; 
 

 
     //locattie 
 
     div.style.top = Math.floor(Math.random() * (cnv.height - 100))+ "px"; 
 
     div.style.left = Math.floor(Math.random() * (cnv.width - 100))+ "px"; 
 

 
     //toevoegen 
 
     div.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ")"; 
 

 
     cnv.appendChild(div); 
 
    } 
 
}

canvas{ 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #898989; 
 
} 
 

 
div { 
 
    position: absolute; 
 
}

<canvas id="playarea"> 
 
</canvas>

Таким образом, вы можете видеть, он отображает только пустой canvas. Только если я реализую элемент, я могу увидеть сгенерированные div -tags. Я также пытаюсь заменить некоторые свойства в коде CSS моего div. Но это не работает ...

Может ли кто-нибудь мне помочь? Спасибо

Answer 1

canvas не предназначен для инкапсуляции div -s вот так. Вы должны попытаться использовать нативные методы холста как fillRect(), например, see this MDN tutorial

С быстрым примером:

document.addEventListener("DOMContentLoaded", function() { 
    init(); 
}); 

function init(){ 
    draw(); 
} 

function draw(){ 

var number = Math.round((Math.random() * 31) + 20); 
var cnv = document.getElementsByTagName("canvas")[0]; 
var ctx = cnv.getContext("2d"); 
var top = 0; 
var left = 0; 
var size = 0; 

for (i = 0; i <= number ; i++){ 

    ctx.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ")"; 

    top = Math.floor(Math.random() * (cnv.height - 100)); 
    left = Math.floor(Math.random() * (cnv.width - 100)); 
    size = Math.round((Math.random() * 31) + 20); 

    ctx.fillRect(left, top, size, size); 

    } 
} 

Answer 2

Узлы внутри объекта холста будет показано только в браузерах, не поддерживающих элемент холста:

<canvas>Your browser <em>doesn't</em> support the canvas element!</canvas> 

Если вы хотите добавить элементы на верхней части холста вы могли бы рассмотреть возможность добавления обертки и добавить элементы к нему:

<div class="canvas_wrapper"> 
    <canvas></canvas> 
    <div class="canvas_child">My added element</div> 
</div> 

И некоторые CSS, как это:

.canvas_wrapper { position: relative; } 
.canvas_child { position: absolute; top: 100px; left: 100px; }