在頁面上動態創建框

Question

我在將框動態添加到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);
}

該頁面上沒有任何顯示，通過調試，似乎屬性有問題。 我不確定從這里去哪里。

Answer 1

您可以使用砌體jquery插件對框進行排序。

Answer 2

context.fillStyle = colour;

你的意思是

context.fillStyle = boxes[i].colour;

在頁面上動態創建框

問題描述

2 個解決方案

解決方案1
0 2013-10-19 21:53:07

解決方案2
0 2013-10-19 22:40:40

在頁面上動態創建框

問題描述

2 個解決方案

解決方案1 0 2013-10-19 21:53:07

解決方案2 0 2013-10-19 22:40:40

解決方案1
0 2013-10-19 21:53:07

解決方案2
0 2013-10-19 22:40:40