目錄
一、程序代碼
二、代碼原理
三、運(yùn)行效果
一、程序代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星空背景</title>
</head>
<body style="overflow-x:hidden;">
<canvas id="canvas"></canvas> <!-- 創(chuàng)建一個(gè)畫布元素 -->
</body>
<script>
// 獲取畫布元素和2D上下文
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
// 設(shè)置畫布寬度和高度
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight-50;
hue = 217; // 設(shè)定顏色
stars = []; // 存儲(chǔ)星星的數(shù)組
count = 0,
maxStars = 1500; // 星星數(shù)量
// 創(chuàng)建用于渲染星星的小畫布
canvas2 = document.createElement('canvas');
w2 = canvas2.width = 100;
h2 = canvas2.height = 100;
ctx2 = canvas2.getContext("2d");
gradientCache = ctx2.createRadialGradient(w2 / 2, h2 / 2, 0, w2 / 2, h2 / 2, w2 / 2);
gradientCache.addColorStop(0.025, '#fff');
gradientCache.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradientCache.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradientCache.addColorStop(1, 'transparent');
ctx2.fillStyle = gradientCache;
ctx2.beginPath();
ctx2.arc(w2 / 2, h2 / 2, w2 / 2, 0, Math.PI * 2);
ctx2.fill();
// 生成隨機(jī)數(shù)
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 確定星星軌道半徑
function maxOrbit(x, y) {
var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
}
// 構(gòu)造函數(shù)用于創(chuàng)建星星對(duì)象
Star = function() {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 10;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(2, maxStars);
this.speed = random(this.orbitRadius) / 120000;
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
// 在畫布上繪制星星
Star.prototype.draw = function() {
x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX;
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY;
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
// 創(chuàng)建一定數(shù)量的星星對(duì)象
for (var i = 0; i < maxStars; i++) {
new Star();
}
// 開(kāi)始繪制星空背景
function start() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1;
ctx.fillStyle = 'hsla(' + hue + ', 64%,6%,0.2)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(start);
}
start(); // 調(diào)用開(kāi)始函數(shù)
</script>
</html>
二、代碼原理
這段代碼通過(guò) HTML5 的 <canvas> 元素和 JavaScript 實(shí)現(xiàn)了一個(gè)星空背景效果。首先，它在頁(yè)面加載時(shí)創(chuàng)建了一個(gè)全屏大小的畫布，并使用 JavaScript 生成了多個(gè)具有不同運(yùn)動(dòng)軌道的星星對(duì)象。每顆星星都具有隨機(jī)的半徑、位置、運(yùn)動(dòng)速度和閃爍效果。通過(guò)使用定時(shí)器和 requestAnimationFrame 方法，實(shí)現(xiàn)了星星的運(yùn)動(dòng)和閃爍效果，從而呈現(xiàn)出逼真的星空背景。整體效果是一個(gè)動(dòng)態(tài)的、具有視差效果的星空背景，為網(wǎng)頁(yè)增添了視覺(jué)吸引力。
-
首先是 HTML 結(jié)構(gòu)部分：
- 定義了一個(gè) HTML 文檔，并設(shè)置了字符集為 UTF-8。
- 設(shè)置了頁(yè)面的標(biāo)題為“星空背景”。
- 在 body 中定義了一個(gè)畫布元素?
<canvas>，并指定了一個(gè) id 為 "canvas"。
-
緊接著是 JavaScript 部分：
- 獲取了?
<canvas>?元素以及其 2D 繪圖上下文。 - 設(shè)置了畫布的寬度和高度為窗口的寬度和高度減去 50。
- 定義了一些變量，如顏色值、存儲(chǔ)星星的數(shù)組、星星數(shù)量等。
- 獲取了?
-
創(chuàng)建用于渲染星星的小畫布：
- 創(chuàng)建了一個(gè)新的?
<canvas>?元素作為緩存畫布。 - 設(shè)置了緩存畫布的寬高，并獲取其 2D 上下文。
- 創(chuàng)建了一個(gè)徑向漸變對(duì)象，定義了星星的顏色漸變規(guī)則。
- 繪制了一個(gè)圓形填充的圖案，代表星星的外觀。
- 創(chuàng)建了一個(gè)新的?
-
定義了兩個(gè)輔助函數(shù)：
random(min, max)?用于生成指定范圍內(nèi)的隨機(jī)數(shù)。maxOrbit(x, y)?用于確定星星軌道的最大半徑。
-
創(chuàng)建了一個(gè)構(gòu)造函數(shù)
Star用于創(chuàng)建星星對(duì)象：- 初始化了星星的軌道半徑、半徑大小、位置等屬性。
- 將每個(gè)創(chuàng)建的星星對(duì)象存儲(chǔ)到 stars 數(shù)組中。
-
定義了
Star原型對(duì)象的draw方法：- 根據(jù)時(shí)間變化計(jì)算星星的位置坐標(biāo)。
- 控制星星閃爍效果的透明度變化。
- 使用緩存畫布繪制星星。
- 更新星星的時(shí)間，實(shí)現(xiàn)星星的運(yùn)動(dòng)效果。
-
創(chuàng)建了一定數(shù)量的星星對(duì)象，并將其存儲(chǔ)在 stars 數(shù)組中。
-
定義了
start函數(shù)開(kāi)始繪制星空背景：- 設(shè)置了畫布的全局合成操作模式和透明度。
- 填充了一個(gè)半透明的矩形作為背景。
- 設(shè)置了全局合成操作模式為 'lighter'，實(shí)現(xiàn)星星的疊加效果。
- 遍歷所有星星對(duì)象，并調(diào)用其?
draw?方法進(jìn)行繪制。 - 使用?
window.requestAnimationFrame?實(shí)現(xiàn)動(dòng)畫效果。
-
調(diào)用
start函數(shù)，開(kāi)始繪制星空背景效果。
三、運(yùn)行效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-828665.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-828665.html
到了這里，關(guān)于HTML5 Canvas與JavaScript攜手繪制動(dòng)態(tài)星空背景的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
