隨機定位圖像

在我的太陽能系統網站上，我希望每次訪問該網站時都會在背景上隨機放置大量白色小圓圈（可能爲1或2像素大）。圓圈不一定是scr =「」圖像，它可以是普通的白色圓圈。隨機定位圖像

html { 
 
    background-color: #000; 
 
} 
 
.sun { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
    border-radius: 50%; 
 
    box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px; 
 
} 
 
.earth { 
 
    height: 25px; 
 
    width: 25px; 
 
    border-radius: 50%; 
 
    box-shadow: green 0 0 25px; 
 
} 
 
.earth-orbit { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 200px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    margin-top: -100px; 
 
    /*border-radius: 50%;*/ 
 
    /*border: 1px dotted gray;*/ 
 
    -webkit-animation: spin-right 10s linear infinite; 
 
} 
 
.moon { 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.moon-orbit { 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: -12.5px; 
 
    margin-bottom: -37px; 
 
    border: 1px solid rgba(255, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 1s linear infinite; 
 
} 
 
@-webkit-keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Vanishing Act</title> 
 
    <link rel='stylesheet' type='text/css' href='stylesheet.css' /> 
 
    <script type='text/javascript' src='script.js'></script> 
 
</head> 
 

 
<body> 
 
    <img class="sun" src="sun_transparent.png"> 
 
    </div> 
 
    <div class="earth-orbit"> 
 
    <div class='moon-orbit'> 
 
     <img class="moon" src="https://dl.dropboxusercontent.com/u/24899062/cc/moon.png" /> 
 
    </div> 
 

 
    <img class="earth" src="https://dl.dropboxusercontent.com/u/24899062/cc/earth.png" /> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2014-12-07 user4191887

而且，什麼是你的問題？你卡在哪裏？ – 2014-12-07 00:29:28

我的問題是我該怎麼做，我不想單獨定位每顆星星，我需要javascript來爲我做並隨機化它。 – user4191887 2014-12-07 00:32:06

好的，但你卡在哪兒..？ – 2014-12-07 00:34:17

而是「污染」的有大量對象，最終可以向頁面被渲染速度較慢的DOM，爲什麼使用畫布星星畫成不考慮解決的辦法？

這將是一個單一的，而是較大，DOM元素，但可以重新繪製速度非常快，你有一些藝術自由，以及如果需要的話：

// load images (just one in this example) 
 
sun = new Image(); 
 
sun.onload = function() { 
 
    renderStars(750, 0.5, 1.5); 
 
} 
 
sun.src = "http://www.mprgroup.net/images/august2011/sun_transparent.png"; 
 

 
function renderStars(count, minSize, maxSize) { 
 
    var canvas = document.getElementById("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 

 
    i = 0, 
 
    x, y, size; 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.beginPath(); 
 

 
    for (; i < count; i++) { 
 
    x = canvas.width * Math.random(); 
 
    y = canvas.height * Math.random(); 
 
    size = minSize + (maxSize - minSize) * Math.random(); 
 

 
    // draw circle 
 
    ctx.moveTo(x + size, y); 
 
    ctx.arc(x, y, size, 0, 2 * Math.PI); 
 
    ctx.closePath(); 
 
    } 
 

 
    ctx.fillStyle = "#fff"; 
 
    ctx.fill(); 
 

 
    var r = 100; // image "radius" 
 
    ctx.drawImage(sun, (canvas.width - r) * 0.5, (canvas.height - r) * 0.5, r, r); 
 
} 
 

 
document.getElementById("refresh").onclick = function() { 
 
    renderStars(750, 0.5, 1.5) 
 
};

#canvas {background: #000} 
 
#refresh {position: fixed}

<button id="refresh">@</button> 
 
<canvas id="canvas" width="500" height="500"></canvas>

最後得出太陽等在星星之上（drawImage(sun, x, y [,width, height])）;

畫布每次大小改變時都需要重繪。

設置畫布，以填補窗口（假設你使用CSS來放置它固定在左上角）：

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

來源

2014-12-07 12:19:46 K3N

我正要對OP說「使用canvas」！「並且比... :) +1 – 2014-12-07 12:36:04

如果你只是用更高密度的恆星模擬銀河系的霧化對角線區域，我會給你另一個+50（如果可以的話）:) – 2014-12-07 12:42:03

PS：'sun = new Image ;'應該'var sun = new Image（）;' – 2014-12-07 12:43:19

這是一個很好的效果。

您可以創建一個star類：

.star { 
    position: fixed; 
    width: 1px; 
    height: 1px; 
    background: white; 
}

爲了確保星星是永遠的太陽系天體的背後，應用z-index到您的太陽能系統映像：

img { 
    z-index: 1; 
}

您可以添加隨機根據屏幕的寬度和高度乘以Math.random()得出它們的左/上座標：

for(var i = 0 ; i < 500 ; i++) { 
 
    var x = Math.random()*screen.width; 
 
    var y = Math.random()*screen.height; 
 
    var star= document.createElement('div'); 
 
    star.className= 'star'; 
 
    star.style.left= x+'px'; 
 
    star.style.top= y+'px'; 
 
    document.body.appendChild(star); 
 
}

html { 
 
    background-color: #000; 
 
} 
 

 
img { 
 
    z-index: 1; 
 
} 
 

 
.star { 
 
    position: fixed; 
 
    width: 1px; 
 
    height: 1px; 
 
    background: white; 
 
} 
 

 
.sun { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
    border-radius: 50%; 
 
} 
 
.earth { 
 
    height: 25px; 
 
    width: 25px; 
 
    border-radius: 50%; 
 
} 
 
.earth-orbit { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 200px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    margin-top: -100px; 
 
    /*border-radius: 50%;*/ 
 
    /*border: 1px dotted gray;*/ 
 
    -webkit-animation: spin-right 10s linear infinite; 
 
} 
 
.moon { 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.moon-orbit { 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: -12.5px; 
 
    margin-bottom: -37px; 
 
    border: 1px solid rgba(255, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 1s linear infinite; 
 
} 
 
@-webkit-keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
}

<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png"> 
 
<div class="earth-orbit"> 
 
    <div class='moon-orbit'> 
 
    <img class="moon" src="http://space-facts.com/wp-content/uploads/moon-transparent.png" /> 
 
    </div> 
 
    <img class="earth" src="http://space-facts.com/wp-content/uploads/earth-transparent.png" /> 
 
</div>

來源

2014-12-07 01:08:21

噢，我該如何做到這一點，所有其他的物體都在明星背景之上？ – user4191887 2014-12-07 01:30:29

我在回答中給了他們一個z-索引，但忘記記錄它。如果他們有背景，他們應該隱藏星星。 – 2014-12-07 01:35:15

我已經更新了我的回覆，並使用了太陽，地球和月亮圖像的實際URL。 – 2014-12-07 11:57:15

隨機定位圖像

回答

相關問題