56bd98a1b9
- 删除冗余CSS文件(bj.css, font.css, sey.css, stars-style.css) - 重构导航栏样式，添加现代化交互效果 - 优化社交图标，使用SVG替代字体图标并添加渐变效果 - 新增关于页面(about.html)及相关资源 - 更新首页(index.html)布局和样式 - 重构星空背景JavaScript(bj.js)，添加错误处理 - 新增关于页面JavaScript功能(about.js)
57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
var canvas;
|
||
var stars_count;
|
||
var stars;
|
||
ini();
|
||
makeStars();
|
||
var interval=setInterval(function(){drawStars();},50);//<2F><>ʱˢ<CAB1><CBA2><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
|
||
function ini(){//初始化
|
||
canvas = document.getElementById("bg");
|
||
if (!canvas) {
|
||
console.warn('Canvas element with id "bg" not found');
|
||
return;
|
||
}
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
context = canvas.getContext("2d");
|
||
stars = Array();//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɵ<EFBFBD><C9B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ݣ<EFBFBD>x,y,<2C><>С<EFBFBD><D0A1><EFBFBD><EFBFBD>ɫ<EFBFBD><C9AB><EFBFBD>ٶȣ<D9B6>
|
||
stars_count = 300;//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
clearInterval(interval);
|
||
}
|
||
|
||
function makeStars(){//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
if (!canvas) return;
|
||
for(var i=0;i<stars_count;i++)
|
||
{
|
||
let x=Math.random() * canvas.offsetWidth;
|
||
let y = Math.random() * canvas.offsetHeight;
|
||
let radius = Math.random()*0.8;
|
||
let color="rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
|
||
let speed=Math.random()*0.5;
|
||
let arr={'x':x,'y':y,'radius':radius,'color':color,'speed':speed};//<2F><>x,y,<2C><>С<EFBFBD><D0A1><EFBFBD><EFBFBD>ɫ<EFBFBD><C9AB><EFBFBD>ٶȣ<D9B6>
|
||
stars.push(arr);//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɵ<EFBFBD><C9B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ݴ<EFBFBD><DDB4><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
}
|
||
}
|
||
|
||
function drawStars(){//<2F><><EFBFBD><EFBFBD><EFBFBD>ǻ<EFBFBD><C7BB><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
if (!canvas || !context) return;
|
||
context.fillStyle = "#0e1729";
|
||
context.fillRect(0,0,canvas.width,canvas.height);
|
||
for (var i = 0; i < stars.length; i++) {
|
||
var x = stars[i]['x'] - stars[i]['speed'];
|
||
if(x<-2*stars[i]['radius']) x=canvas.width;
|
||
stars[i]['x']=x;
|
||
var y = stars[i]['y'];
|
||
var radius = stars[i]['radius'];
|
||
context.beginPath();
|
||
context.arc(x, y, radius*2, 0, 2*Math.PI);
|
||
context.fillStyle = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
|
||
context.fill();
|
||
}
|
||
}
|
||
|
||
window.onresize = function(){//<2F><><EFBFBD>ڴ<EFBFBD>С<EFBFBD><D0A1><EFBFBD><EFBFBD><EFBFBD>仯ʱ<E4BBAF><CAB1><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
ini();
|
||
makeStars();
|
||
interval=setInterval(function(){drawStars();},50);
|
||
} |