<!doctype html><html><head><meta charset="utf-8"><title>想要更多好玩代码来裙:906407826</title><style>
html,body{
margin:0px;width:100%;height:100%;overflow:hidden;background:#000;}
#canvas{
position:absolute;width:100%;height:100%;}</style></head><body><canvas id="canvas"></canvas><script>functionproject3D(x,y,z,vars){
var p,d;
x-=vars.camX;
y-=vars.camY-8;
z-=vars.camZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-vars.yaw)*d;
z=Math.cos(p-vars.yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-vars.pitch)*d;
z=Math.cos(p-vars.pitch)*d;var rx1=-1000;var ry1=1;var rx2=1000;var ry2=1;var rx3=0;var ry3=0;var rx4=x;var ry4=z;var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=0.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){
return{
x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,y:vars.cy+y/z*vars.scale,d:(x*x+y*y+z*z)};}else{
return{
d:-1};}}functionelevation(x,y,z){
var dist = Math.sqrt(x*x+y*y+z*z);if(dist && z/dist>=-1&& z/dist <=1)return Math.acos(z / dist);return0.00000001;}functionrgb(col){
col +=0.000001;var r =parseInt((0.5+Math.sin(col)*0.5)*16);var g =parseInt((0.5+Math.cos(col)*0.5)*16);var b =parseInt((0.5-Math.sin(col)*0.5)*16);return"#"+r.toString(16)+g.toString(16)+b.toString(16);}functioninterpolateColors(RGB1,RGB2,degree){
var w2=degree;var w1=1-w2;return[w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];}functionrgbArray(col){
col +=0.000001;var r =parseInt((0.5+Math.sin(col)*0.5)*256);var g =parseInt((0.5+Math.cos(col)*0.5)*256);var b =parseInt((0.5-Math.sin(col)*0.5)*256);return[r, g, b];}functioncolorString(arr){
var r =parseInt(arr[0]);var g =parseInt(arr[1]);var b =parseInt(arr[2]);return"#"+("0"+ r.toString(16)).slice(-2)+("0"+ g.toString(16)).slice(-2)+("0"+ b.toString(16)).slice(-2);}functionprocess(vars){
if(vars.points.length<vars.initParticles)for(var i=0;i<5;++i)spawnParticle(vars);var p,d,t;
p = Math.atan2(vars.camX, vars.camZ);
d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
d -= Math.sin(vars.frameNo /80)/25;
t = Math.cos(vars.frameNo /300)/165;
vars.camX = Math.sin(p + t)* d;
vars.camZ = Math.cos(p + t)* d;
vars.camY =-Math.sin(vars.frameNo /220)*15;
vars.yaw = Math.PI+ p + t;
vars.pitch =elevation(vars.camX, vars.camZ, vars.camY)- Math.PI/2;var t;for(var i=0;i<vars.points.length;++i){
x=vars.points[i].x;
y=vars.points[i].y;
z=vars.points[i].z;
d=Math.sqrt(x*x+z*z)/1.0075;
t=.1/(1+d*d/5);
p=Math.atan2(x,z)+t;
vars.points[i].x=Math.sin(p)*d;
vars.points[i].z=Math.cos(p)*d;
vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);if(vars.points[i].y>vars.vortexHeight/2|| d<.25){
vars.points.splice(i,1);spawnParticle(vars);}}}functiondrawFloor(vars){
var x,y,z,d,point,a;for(var i =-25; i <=25; i +=1){
for(var j =-25; j <=25; j +=1){
x = i*2;
z = j*2;
y = vars.floor;
d = Math.sqrt(x * x + z * z);
point =project3D(x, y-d*d/85, z, vars);if(point.d !=-1){
size =1+15000/(1+ point.d);
a =0.15- Math.pow(d /50,4)*0.15;if(a >0){
vars.ctx.fillStyle =colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}}
vars.ctx.fillStyle ="#82f";for(var i =-25; i <=25; i +=1){
for(var j =-25; j <=25; j +=1){
x = i*2;
z = j*2;
y =-vars.floor;
d = Math.sqrt(x * x + z * z);
point =project3D(x, y+d*d/85, z, vars);if(point.d !=-1){
size =1+15000/(1+ point.d);
a =0.15- Math.pow(d /50,4)*0.15;if(a >0){
vars.ctx.fillStyle =colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}}}functionsortFunction(a,b){
return b.dist-a.dist;}functiondraw(vars){
vars.ctx.globalAlpha=.15;
vars.ctx.fillStyle="#000";
vars.ctx.fillRect(0,0, canvas.width, canvas.height);drawFloor(vars);var point,x,y,z,a;for(var i=0;i<vars.points.length;++i){
x=vars.points[i].x;
y=vars.points[i].y;
z=vars.points[i].z;
point=project3D(x,y,z,vars);if(point.d !=-1){
vars.points[i].dist=point.d;
size=1+vars.points[i].radius/(1+point.d);
d=Math.abs(vars.points[i].y);
a =.8- Math.pow(d /(vars.vortexHeight/2),1000)*.8;
vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
vars.ctx.fillStyle=rgb(vars.points[i].color);if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}
vars.points.sort(sortFunction);}functionspawnParticle(vars){
var p,ls;
pt={
};
p=Math.PI*2*Math.random();
ls=Math.sqrt(Math.random()*vars.distributionRadius);
pt.x=Math.sin(p)*ls;
pt.y=-vars.vortexHeight/2;
pt.vy=vars.initV/20+Math.random()*vars.initV;
pt.z=Math.cos(p)*ls;
pt.radius=200+800*Math.random();
pt.color=pt.radius/1000+vars.frameNo/250;
vars.points.push(pt);}functionframe(vars){
if(vars ===undefined){
var vars={
};
vars.canvas = document.querySelector("canvas");
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
window.addEventListener("resize",function(){
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;},true);
vars.frameNo=0;
vars.camX =0;
vars.camY =0;
vars.camZ =-14;
vars.pitch =elevation(vars.camX, vars.camZ, vars.camY)- Math.PI/2;
vars.yaw =0;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
vars.bounding=10;
vars.scale=500;
vars.floor=26.5;
vars.points=[];
vars.initParticles=700;
vars.initV=.01;
vars.distributionRadius=800;
vars.vortexHeight=25;}
vars.frameNo++;requestAnimationFrame(function(){
frame(vars);});process(vars);draw(vars);}frame();</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p><p><a href="http://sc.chinaz.com/" target="_blank"></a></p></div></body></html>
曙光
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><title>star</title><script type="text/javascript">
window.onload=function(){
C= Math.cos;// cache Math objectsS= Math.sin;U=0;
w = window;
j = document;
d = j.getElementById("c");
c = d.getContext("2d");W= d.width = w.innerWidth;H= d.height = w.innerHeight;
c.fillRect(0,0,W,H);// resize <canvas> and draw black rect (default)
c.globalCompositeOperation ="lighter";// switch to additive color application
c.lineWidth =0.2;
c.lineCap ="round";var bool =0,
t =0;// theta
d.onmousemove=function(e){
if(window.T){
if(D==9){
D=Math.random()*15;f(1);}clearTimeout(T);}X= e.pageX;// grab mouse pixel coordsY= e.pageY;
a=0;// previous coord.x
b=0;// previous coord.y A=X,// original coord.xB=Y;// original coord.yR=(e.pageX/W*999>>0)/999;
r=(e.pageY/H*999>>0)/999;U=e.pageX/H*360>>0;D=9;
g =360* Math.PI/180;T=setInterval(f=function(e){
// start looping spectrum
c.save();
c.globalCompositeOperation ="source-over";// switch to additive color applicationif(e!=1){
c.fillStyle ="rgba(0,0,0,0.02)";
c.fillRect(0,0,W,H);// resize <canvas> and draw black rect (default)}
c.restore();
i =25;while(i --){
c.beginPath();if(D>450|| bool){
// decrease diameterif(!bool){
// has hit maximum
bool =1;}if(D<0.1){
// has hit minimum
bool =0;}
t -= g;// decrease thetaD-=0.1;// decrease size}if(!bool){
t += g;// increase thetaD+=0.1;// increase size}
q =(R/ r -1)* t;// create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x =(R- r)*C(t)+D*C(q)+(A+(X-A)*(i /25))+(r -R);// center on xy coords
y =(R- r)*S(t)-D*S(q)+(B+(Y-B)*(i /25));if(a){
// draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)}
c.strokeStyle ="hsla("+(U%360)+",100%,50%,0.75)";// draw rainbow hypotrochoid
c.stroke();
a = x;// set previous coord.x
b = y;// set previous coord.y}U-=0.5;// increment hueA=X;// set original coord.xB=Y;// set original coord.y},16);}
j.onkeydown=function(e){
a=b=0;R+=0.05}
d.onmousemove({
pageX:300,pageY:290})}</script></head><body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;"><canvas id="c"></canvas></body></html>
星 空
<!doctype html><html><head><meta charset="utf-8"><title>旋转的星空</title><style type="text/css">
body{
background: black;padding:0;margin:0; overflow:hidden}.header{
margin:0 auto;width:100%;height:100%;background-color: #000;position: relative;}</style></head><body><div class="header"><canvas id="canvas"></canvas></div><script>var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue =217,
stars =[],
count =0,
maxStars =3000;//星星数量var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width =100;
canvas2.height =100;var half = canvas2.width /2,
gradient2 = ctx2.createRadialGradient(half, half,0, half, half, half);
gradient2.addColorStop(0.025,'#CCC');
gradient2.addColorStop(0.1,'hsl('+ hue +', 61%, 33%)');
gradient2.addColorStop(0.25,'hsl('+ hue +', 64%, 6%)');
gradient2.addColorStop(1,'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half,0, Math.PI*2);
ctx2.fill();// End cachefunctionrandom(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;}functionmaxOrbit(x, y){
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));return diameter /2;//星星移动范围,值越大范围越小,}varStar=function(){
this.orbitRadius =random(maxOrbit(w, h));this.radius =random(60,this.orbitRadius)/8;//星星大小this.orbitX = w /2;this.orbitY = h /2;this.timePassed =random(0, maxStars);this.speed =random(this.orbitRadius)/50000;//星星移动速度this.alpha =random(2,10)/10;
count++;
stars[count]=this;}Star.prototype.draw=function(){
var 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;}elseif(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;}for(var i =0; i < maxStars; i++){
newStar();}functionanimation(){
ctx.globalCompositeOperation ='source-over';
ctx.globalAlpha =0.5;//尾巴
ctx.fillStyle ='hsla('+ hue +', 64%, 6%, 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(animation);}animation();</script></body></html>