新增: 壁纸切换（主题/本地图片/Bing/纯色渐变）
This commit is contained in:
77
web/themes/aurora.html
Normal file
77
web/themes/aurora.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var gl = canvas.getContext('webgl');
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
var vsSource = 'attribute vec4 aVertexPosition;void main(){gl_Position=aVertexPosition;}';
|
||||
var fsSource = `
|
||||
precision mediump float;
|
||||
uniform float uTime;
|
||||
uniform vec2 uResolution;
|
||||
void main() {
|
||||
vec2 uv=gl_FragCoord.xy/uResolution.xy;
|
||||
vec3 c1=vec3(0.1,0.4,0.8);
|
||||
vec3 c2=vec3(0.4,0.2,0.8);
|
||||
vec3 c3=vec3(0.1,0.6,0.4);
|
||||
float w1=sin(uv.x*3.0+uTime*0.5)*0.5+0.5;
|
||||
float w2=sin(uv.x*4.0+uTime*0.3+uv.y*2.0)*0.5+0.5;
|
||||
float w3=sin(uv.x*2.0+uTime*0.7+uv.y*3.0)*0.5+0.5;
|
||||
float d=uv.y*2.0-1.0;
|
||||
float g=exp(-d*d*2.0);
|
||||
vec3 a=(c1*w1+c2*w2+c3*w3)*g*0.6;
|
||||
vec3 b=mix(vec3(0.02,0.02,0.08),vec3(0.05,0.05,0.15),uv.y);
|
||||
gl_FragColor=vec4(b+a,1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
function loadShader(gl,type,source){
|
||||
var s=gl.createShader(type);
|
||||
gl.shaderSource(s,source);
|
||||
gl.compileShader(s);
|
||||
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)){gl.deleteShader(s);return null;}
|
||||
return s;
|
||||
}
|
||||
|
||||
var vs=loadShader(gl,gl.VERTEX_SHADER,vsSource);
|
||||
var fs=loadShader(gl,gl.FRAGMENT_SHADER,fsSource);
|
||||
var prog=gl.createProgram();
|
||||
gl.attachShader(prog,vs);
|
||||
gl.attachShader(prog,fs);
|
||||
gl.linkProgram(prog);
|
||||
|
||||
var posLoc=gl.getAttribLocation(prog,'aVertexPosition');
|
||||
var timeLoc=gl.getUniformLocation(prog,'uTime');
|
||||
var resLoc=gl.getUniformLocation(prog,'uResolution');
|
||||
|
||||
var posBuf=gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER,posBuf);
|
||||
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,1,1,1,-1,-1,1,-1]),gl.STATIC_DRAW);
|
||||
|
||||
var startTime=Date.now();
|
||||
var FPS=15,lastFrame=0;
|
||||
|
||||
function render(ts){
|
||||
requestAnimationFrame(render);
|
||||
if(ts-lastFrame<1000/FPS)return;
|
||||
lastFrame=ts;
|
||||
gl.viewport(0,0,canvas.width,canvas.height);
|
||||
gl.clearColor(0,0,0,1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.useProgram(prog);
|
||||
gl.enableVertexAttribArray(posLoc);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER,posBuf);
|
||||
gl.vertexAttribPointer(posLoc,2,gl.FLOAT,false,0,0);
|
||||
gl.uniform1f(timeLoc,(Date.now()-startTime)/1000);
|
||||
gl.uniform2f(resLoc,canvas.width,canvas.height);
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
</script>
|
||||
17
web/themes/gradient.html
Normal file
17
web/themes/gradient.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<style>
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
#gradient-bg {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 1;
|
||||
background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #1a1a2e, #16213e);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 20s ease infinite;
|
||||
}
|
||||
</style>
|
||||
<div id="gradient-bg"></div>
|
||||
60
web/themes/particles.html
Normal file
60
web/themes/particles.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
var particles = [];
|
||||
for (var i = 0; i < 80; i++) {
|
||||
particles.push({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
r: Math.random() * 3 + 1,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: -(Math.random() * 0.8 + 0.2),
|
||||
alpha: Math.random() * 0.5 + 0.2,
|
||||
hue: Math.random() * 60 + 200
|
||||
});
|
||||
}
|
||||
|
||||
var FPS = 15, lastFrame = 0;
|
||||
|
||||
function render(ts) {
|
||||
requestAnimationFrame(render);
|
||||
if (ts - lastFrame < 1000 / FPS) return;
|
||||
lastFrame = ts;
|
||||
|
||||
var w = canvas.width, h = canvas.height;
|
||||
ctx.fillStyle = 'rgba(5, 5, 15, 0.15)';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
for (var i = 0; i < particles.length; i++) {
|
||||
var p = particles[i];
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
if (p.y < -20) { p.y = h + 20; p.x = Math.random() * w; }
|
||||
if (p.x < -20) p.x = w + 20;
|
||||
if (p.x > w + 20) p.x = -20;
|
||||
|
||||
var grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 4);
|
||||
grad.addColorStop(0, 'hsla(' + p.hue + ', 70%, 70%, ' + p.alpha + ')');
|
||||
grad.addColorStop(1, 'hsla(' + p.hue + ', 70%, 70%, 0)');
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.r * 4, 0, Math.PI * 2);
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'hsla(' + p.hue + ', 80%, 80%, ' + (p.alpha + 0.3) + ')';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
</script>
|
||||
64
web/themes/starfield.html
Normal file
64
web/themes/starfield.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
var stars = [];
|
||||
for (var i = 0; i < 300; i++) {
|
||||
stars.push({
|
||||
x: (Math.random() - 0.5) * canvas.width,
|
||||
y: (Math.random() - 0.5) * canvas.height,
|
||||
z: Math.random() * canvas.width,
|
||||
pz: 0
|
||||
});
|
||||
}
|
||||
|
||||
var FPS = 15, lastFrame = 0;
|
||||
|
||||
function render(ts) {
|
||||
requestAnimationFrame(render);
|
||||
if (ts - lastFrame < 1000 / FPS) return;
|
||||
lastFrame = ts;
|
||||
|
||||
var w = canvas.width, h = canvas.height;
|
||||
var cx = w / 2, cy = h / 2;
|
||||
ctx.fillStyle = 'rgba(2, 3, 12, 0.25)';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
var speed = 8;
|
||||
for (var i = 0; i < stars.length; i++) {
|
||||
var s = stars[i];
|
||||
s.z -= speed;
|
||||
if (s.z <= 0) {
|
||||
s.x = (Math.random() - 0.5) * w;
|
||||
s.y = (Math.random() - 0.5) * h;
|
||||
s.z = w;
|
||||
s.pz = s.z;
|
||||
}
|
||||
var sx = (s.x / s.z) * w * 0.5 + cx;
|
||||
var sy = (s.y / s.z) * h * 0.5 + cy;
|
||||
var px = (s.x / s.pz) * w * 0.5 + cx;
|
||||
var py = (s.y / s.pz) * h * 0.5 + cy;
|
||||
s.pz = s.z;
|
||||
var r = Math.max(0.5, (1 - s.z / w) * 2.5);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(px, py);
|
||||
ctx.lineTo(sx, sy);
|
||||
ctx.strokeStyle = 'rgba(200, 220, 255, ' + ((1 - s.z / w) * 0.8) + ')';
|
||||
ctx.lineWidth = r;
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(sx, sy, r * 0.6, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(220, 235, 255, ' + ((1 - s.z / w) * 0.9) + ')';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
</script>
|
||||
Reference in New Issue
Block a user