<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0; }
body { position:relative; width:100%; height:100%; overflow:hidden; }
button { color:#222; font-size:20px; padding:5px 20px; width:120px; }
#btn1 { position:absolute; top:10px; left:10px; }
#btn2 { position:absolute; top:60px; left:10px; }
#btn3 { position:absolute; top:110px; left:10px; }
#btn4 { position:absolute; top:160px; left:10px; }
#btn5 { position:absolute; top:210px; left:10px; }
#btn6 { position:absolute; top:260px; left:10px; }
#btn7 { position:absolute; top:310px; left:10px; }
#btn8 { position:absolute; top:360px; left:10px; }
#btn9 { position:absolute; top:410px; left:10px; }
#btn0 { position:absolute; top:460px; left:10px; }
</style>
<script src="js/jquery.min.js"></script>
<title>光标</title>
</head>
<body>
<canvas id="c"></canvas>
<div class="btn_left;">
<button id="btn1">效果1</button>
<button id="btn2">效果2</button>
<button id="btn3">效果3</button>
<button id="btn4">效果4</button>
<button id="btn5">效果5</button>
<button id="btn6">效果6</button>
<button id="btn7">效果7</button>
<button id="btn8">效果8</button>
<button id="btn9">效果9</button>
<button id="btn0">效果10</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var c = $("#c");
var x,y,w,h,cx,cy,l;
var y = [];
var b = {
n:100,
c:false, // 颜色 如果是false 则是随机渐变颜色
bc:'#000', // 背景颜色
r:0.9,
o:0.05,
a:1,
s:20,
}
var bx = 0,by = 0,vx = 0,vy = 0;
var td = 0;
var p = 0;
var hs = 0;
re();
var color,color2;
if(b.c){
color2 = b.c;
}else{
color = Math.random()*360;
}
$(window).resize(function(){
re();
});
var tp1=true,tp2 = false,tp3 = false,tp4 = false,tp5 = false,tp6 = false,tp7 = false,tp8 = false,tp9 = false,tp0 = false;
function begin(){
if(tp1){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
y[i].r+=b.r;
y[i].o-=b.o;
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp2){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
y[i].r=10;
ctx.shadowBlur=20;
ctx.shadowColor=color2;
ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
y[i].o-=b.o;
y[i].v+=b.a;
y[i].y+=y[i].v;
if(y[i].y>=h+y[i].r || y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp3){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
td+=5;
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur=20;
ctx.shadowColor=color2;
y[i].r=(1-(y[i].y/h))*20;
ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
y[i].o=y[i].y/h;
y[i].v+=b.a;
y[i].y-=b.s;
y[i].x+=(Math.cos((y[i].y+td)/100)*10);
if(y[i].y<=0-y[i].r || y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp4){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur=20;
ctx.shadowColor=color2;
y[i].vx2 += (cx - y[i].wx)/1000;
y[i].vy2 += (cy - y[i].wy)/1000;
y[i].wx+=y[i].vx2;
y[i].wy+=y[i].vy2;
y[i].o-=b.o/2;
y[i].r=10;
ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp5){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = .18;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
p+=5;
ctx.globalAlpha = 1;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur=20;
ctx.shadowColor=color2;
ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
}else if(tp6){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.strokeStyle = color2;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(y[i].x,y[i].y);
ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);
ctx.lineTo(y[i].wx,y[i].wy);
ctx.closePath();
ctx.stroke();
y[i].o-=b.o;
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp7){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
if(y.length<b.n*2){
hs = Math.random()*2*Math.PI;
y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});
}
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
y[i].x+=(cx-y[i].x)/10;
y[i].y+=(cy-y[i].y)/10;
ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);
ctx.closePath();
ctx.fill();
y[i].o-=b.o;
if(y[i].o<=0){
y[i].h = Math.random()*2*Math.PI;
y[i].x = cx+((Math.random()-.5)*100*Math.cos(y[i].h));
y[i].y = cy+((Math.random()-.5)*100*Math.sin(y[i].h));
y[i].o = 1;
};
}
}else if(tp8){
if(!b.c){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
ctx.fillStyle = color2;
if(cx%4 == 0){
cx+=1;
}else if(cx%4 == 2){
cx-=1
}
else if(cx%4 == 3){
cx-=2
}
if(cy%4 == 0){
cy+=1;
}else if(cy%4 == 2){
cy-=1
}