溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文章向大家介紹使用JavaScript編寫一個旋轉星空效果，主要包括使用JavaScript編寫一個旋轉星空效果的使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。
Java是一門面向對象編程語言，可以編寫桌面應用程序、Web應用程序、分布式系統和嵌入式系統應用程序。
具體內容如下
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="starry sky">
<meta name="description" content="the starry sky">
<title>旋轉的星空(the starry sky)</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
position: absolute;
left: 0;
}
#starCanvasDiv {
background-color: white;
}
</style>
</head>
<body>
<canvas id="canvas">Your browser can not support canvas</canvas>
<script>
var doublePI = Math.PI * 2;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx,cy;
var starCanvas;
var alphaChangeProbability = new AlphaChangeProbability();
//色相
var hue = 217;
//星空背景顏色
var bgColor = 'hsl(' + hue + ', 60%, 5%)';
//畫布的外切圓半徑
var canvasRadius;
//每旋轉一圈要需要的幀數
var radianStepCount;
//星星的總個數
var starCount;
//群星
var stars;
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
cx = canvas.width / 2;
cy = canvas.height / 2;
canvasRadius = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2)) / 2;
radianStepCount = canvasRadius * 100;
starCount = parseInt((canvas.width + canvas.height) * 0.5);
stars = [];
for(var i=0; i<starCount; i++) {
stars.push(new Star());
}
//初始時要先繪制一層背景,否則第一波星星走過的路徑會有畫布底料涂抹不均勻的感覺
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = 1;
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function init() {
createStarCanvas();
window.addEventListener("resize", onResize);
onResize();
loop();
}
//在[min, max)范圍內隨機一個整數
function randomInt(min, max) {
if(arguments.length === 1) {
max = min;
min = 0;
} else if(min > max) {
var tmp = max;
mix = min;
min = tmp;
}
return Math.floor(Math.random() * (max - min) + min);
}
//透明度改變的概率
function AlphaChangeProbability() {
//透明度改變的步長
var alphaStep = 0.05;
//透明度增加
var plus = 1;
//透明度減少
var minus = 1;
//透明度不變
var invariant = 8;
//總概率
var totalChance = plus + minus + invariant;
//獲取隨機的透明度改變值
function getRandomChangeValue() {
var value = Math.random() * totalChance;
if(value < plus) {
return alphaStep;
}
value -= plus;
if(value < minus) {
return -alphaStep;
}
return 0;
}
//隨機改變alpha的值
this.randomChangeAlpha = function(alpha) {
alpha += getRandomChangeValue();
if(alpha > 1) {
alpha = 1;
} else if(alpha < 0) {
alpha = 0;
}
return alpha;
}
}
//創建星星圖片
function createStarCanvas() {
starCanvas = document.createElement("canvas");
var ctx = starCanvas.getContext("2d");
starCanvas.width = 100;
starCanvas.height = 100;
var cx = starCanvas.width / 2;
var cy = starCanvas.height / 2;
var radius = Math.max(cx, cy);
var gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
gradient.addColorStop(0.025, '#CCC');
gradient.addColorStop(0.1, 'hsl(' + hue + ', 65%, 35%)');
gradient.addColorStop(0.25, bgColor);
gradient.addColorStop(1, "transparent");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, doublePI);
ctx.fill();
}
//星體對象
var Star = function() {
//星體運行的軌道半徑
this.orbitRadius = Math.random() * canvasRadius;
//星體的半徑
this.radius = randomInt(60, this.orbitRadius) / 8;
//星體透明度
this.alpha = Math.random();
//相對軌道中心(即畫布中心)的角度
this.theta = Math.random() * doublePI;
//角速度
this.speed = Math.random() * this.orbitRadius / radianStepCount;
//獲取當前坐標
this.getPos = function() {
return {
x: cx + this.orbitRadius * Math.cos(this.theta),
y: cy + this.orbitRadius * Math.sin(this.theta)
}
}
}
Star.prototype.update = function() {
this.alpha = alphaChangeProbability.randomChangeAlpha(this.alpha);
this.theta += this.speed;
this.pos = this.getPos();
}
Star.prototype.draw = function() {
ctx.globalAlpha = this.alpha;
ctx.drawImage(starCanvas, this.pos.x, this.pos.y, this.radius, this.radius);
}
function loop() {
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = 0.5;
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < stars.length; i++) {
stars[i].update();
stars[i].draw();
}
//繪制星體圖樣
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = 1;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, starCanvas.width, starCanvas.height);
ctx.drawImage(starCanvas, 0, 0, starCanvas.width, starCanvas.height);
requestAnimationFrame(loop);
}
init();
</script>
</body>
</html>
到此這篇關于使用JavaScript編寫一個旋轉星空效果的文章就介紹到這了，更多相關的內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
