Создавайте коробки динамически на странице

Question

Создавайте коробки динамически на странице

0

У меня возникли проблемы с динамическим добавлением ящиков в HTML-холст. В случайных позициях должно быть произвольное количество случайных цветов. Целью того, что я делаю с коробками, является возможность их перемещения. По сути, я действительно потерян.

Вот код html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ramdom Boxes</title>
        <script src="A2Q1.js"></script>
    </head>

    <body>      
    </body>
</html>

Вот код Javascript:

window.onload = init;

function init() {
    //when page is loaded create a bunch of boxes randomly throughout the page
    //get the body element of the document
    var body = document.getElementsByTagName("body")[0];

    //create the canvas tag
    var canvas = document.createElement("canvas");
    canvas.height = 666;
    canvas.width = 1346;
    var context = canvas.getContext("2d");

    //create the random boxes and append onto the canvas
    var randNum = Math.floor(Math.random() * 1000 + 1);

    var boxes = [];
    for(var i=0;i<randNum;i++){
        boxes[i].height = 50;
        boxes[i].width = 50;
        boxes[i].x = Math.floor(Math.random() * (1346 - boxes[i].width));
        boxes[i].y = Math.floor(Math.random() * (666 - boxes[i].height));

        boxes[i].colour = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    }

    for(var i=0;i<boxes.length;i++){
        context.fillStyle = colour;
        context.fillRect(boxes[i].x, boxes[i].y, , boxes[i].height); 
    }

    //append the canvas onto the body 
    body.appendChild(canvas);
}

На странице ничего не появляется, отлаживая, кажется, что у него проблемы со свойствами. Я не уверен, куда идти отсюда.

user2619395 19 окт. 2013, в 22:57

Источник

0

Какие ошибки выбрасываются в консоли?
Bram Vanroy 19 окт. 2013, в 20:37
0

@BramVanroy Ну, он выбрасывал ошибки, попадающие в коробки [i]. Что-то (.width, .x, .y и т. Д.). Но теперь он даже не показывает никаких ошибок и не отображает никаких полей.
user2619395 19 окт. 2013, в 20:41
0

У вас есть две запятые на шестой от последней строки., После boxes[i].y . Они должны быть такими?
Bram Vanroy 20 окт. 2013, в 07:22

Показать ещё 1 комментарий

Теги:

javascript

html

2 ответа

Ещё вопросы

Какие ошибки выбрасываются в консоли?
@BramVanroy Ну, он выбрасывал ошибки, попадающие в коробки [i]. Что-то (.width, .x, .y и т. Д.). Но теперь он даже не показывает никаких ошибок и не отображает никаких полей.
У вас есть две запятые на шестой от последней строки., После boxes[i].y . Они должны быть такими?

Dan Brinkman · Answer 1 · 2013-10-19T21-17-00.000Z

context.fillStyle = colour;

Ты имел ввиду

context.fillStyle = boxes[i].colour;

Bytemain · Answer 2 · 2013-10-19T20-16-00.000Z

Вы можете использовать плагин jquery masonry для сортировки ящиков.