0

我在整个页面中随机放置一堆随机框时遇到了一些麻烦。

目标是在随机位置显示随机数量的框，并且这些框是页面上的随机颜色。盒子也应该重叠，使它们真正处于随机位置。

到目前为止，我所拥有的只是页面上一个随机颜色的框，显然不是随机放置的。我不知道从这里开始的定位和创建一堆随机框...

请注意不能使用 JQuery。

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 = 100;
    canvas.width = 100;
    var context = canvas.getContext("2d");

    //create the box and append onto the canvas 
    var colour = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    context.fillStyle = colour;
    context.fillRect(25,25,50,50); 

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

3 回答 3

2

最好将画布的大小调整为窗口大小。为了绘制一堆矩形，使用for循环重复执行绘制矩形代码。设置每个矩形在窗口宽度和高度中的位置 (Math.random() * window.innerWidth, Math.random() * window.innerHeight)。

这是我的示例代码。

function init() {
    var body = document.getElementsByTagName("body")[0];
    var canvas = document.createElement("canvas");
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    var context = canvas.getContext("2d");

    //  Opacity makes a good appearance when objects are overlapped 
    context.globalAlpha=0.7;

    //  Repeat to draw a rectangle 100 times
    for(var i=0;i<100;i++){
        var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
        context.fillStyle = color;

        //Each rectangle is at (0 ~ width of window, 0 ~ height of window)
        //Each rectangle's size is (20 ~ 100, 20 ~ 100)     
        context.fillRect(Math.random()*window.innerWidth, Math.random()*window.innerHeight, Math.random()*80+20, Math.random()*80+20);
    }

    body.appendChild(canvas);
}
window.onload = init;
于 2013-10-16T05:37:32.633 回答
1

要生成随机颜色，您可以参考这篇文章

为了获得关于整个屏幕宽度和高度的 x 和 y 随机值，试试这个。

var maxWidth  = 1000;
var maxHeight = 1000;

var randomX = Math.max(0, Math.min((maxWidth - boxWidth), Math.random() * maxWidth));
var randomY = Math.max(0, Math.min((maxHeight - boxHeight), Math.random() * maxHeight));

像这样设置画布的位置。

box.style.position = "absolute";
box.style.left = randomX;
box.style.top  = randomX;
于 2013-10-16T03:14:15.050 回答
-1

在您的页面中创建一个表格并将该随机框随机放置到一个单元格中。

例如

<table>
<!--many cell-->
</table>

那么您可以将您的盒子随机放入表格的单元格中。

于 2013-10-16T03:09:04.413 回答