隨機定位框

我在整個頁面隨機定位一堆隨機框時遇到了一些麻煩。隨機定位框

目標是隨機數量的框出現在隨機的位置，並且框在頁面上是隨機的顏色。箱子也應該重疊，使它們真正處於隨機位置。

到目前爲止，我所擁有的只是一個隨機在頁面上的彩色框，顯然沒有隨機定位。我很喜歡從這裏定位並創建一堆隨機框......

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

來源

2013-10-16 user2619395

'context.fillRect（25,25,50,50）'正在從位置（25,25）開始繪製一個50x50的矩形。請參閱：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#fillRect（） – thgaskell

@thgaskell感謝您的澄清！更有意義。 – user2619395

最好是調整畫布的大小和窗口大小一樣多。爲了繪製一堆矩形，使用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;

來源

2013-10-16 05:37:32

-1

建立在你的頁面的表格，並將該隨機箱子隨機到一個小區。

例如

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

，那麼你可以把你的箱子隨機到表的單元格。

來源

2013-10-16 03:09:04 Manwal

我應該更清楚了，箱子應該重疊並且沒有任何結構。 – user2619395

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;

來源

2013-10-16 03:14:15 Triode

它看起來像你正在返回[0，'maxWidth-BoxWidth']而不是[0，'maxWidth-boxWidth'）？ – thgaskell

不，它會返回最小值0和最大值（maxWidth - boxWidth），這將確保所有給定的框將在可見區域。 – Triode

對，但不應該是'（maxWidth - boxWidth） - 1'？如果你有一個1x1的畫布，而你在（1,1）處繪製，它將離開畫布。 – thgaskell

回答

相關問題