Question

我在整个页面中随机定位一堆随机盒时遇到了一些麻烦。

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

到目前为止，我所拥有的只是页面上的一个随机彩色框，显然不是随机定位的。我很尴尬，从这里开始定位并创建一堆随机盒......

请注意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);
}

Answer 1

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

这是my sample code。

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;

Answer 2

For generating the random color you can refer this post

为了获得与整个屏幕的宽度和高度相关的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;

Answer 3

在页面中创建一个表格，然后将该随机框随机放入单元格中。

例如

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

然后你可以把你的盒子随机地放到桌子的单元格里。

随机定位框

3 个答案: