html 代码
- <!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="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
- <title>Canvas 跟随鼠标光标动画特效 - 爱编程实例, 分享 jQuery,html5,css3 等插件 </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
- }
- else if(cy%4 == 3){
- cy-=2
- }
- for(var i=cx-60;i<cx+60;i+=4){
- for(var j=cy-60;j<cy+60;j+=4){
- if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){
- ctx.globalAlpha = 1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);
- if(Math.random()<.2){
- ctx.fillRect(i,j,3,3);
- }
- }
- }
- }
- }else if(tp9){
- 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
- }
- else if(cy%4 == 3){
- cy-=2
- }
- if(y.length<b.n){
- y.push({x:cx,y:cy,xv:0,yv:0,o:1});
- }
- for(var i=0;i<y.length;i++){
- if(y[i].xv==0 && y[i].yv==0){
- if(Math.random()<.5){
- if(Math.random()<.5){
- y[i].xv = 3;
- }else{
- y[i].xv = -3;
- }
- }else{
- if(Math.random()<.5){
- y[i].yv = 3;
- }else{
- y[i].yv = -3;
- }
- }
- }else{
- if(y[i].xv == 0){
- if(Math.random()<.66){
- y[i].yv = 0;
- if(Math.random()<.5){
- y[i].xv = 3;
- }else{
- y[i].xv = -3;
- }
- }
- }else if(y[i].yv == 0){
- if(Math.random()<.66){
- y[i].xv = 0;
- if(Math.random()<.5){
- y[i].yv = 3;
- }else{
- y[i].yv = -3;
- }
- }
- }
- }
- y[i].o-=b.o/2;
- ctx.globalAlpha = y[i].o;
- y[i].x+=y[i].xv;
- y[i].y+=y[i].yv;
- ctx.fillRect(y[i].x,y[i].y,3,3);
- if(y[i].o<=0){
- y.splice(i,1);
- i--;
- };
- }
- }else if(tp0){
- 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;
- y.push({x:cx,y:cy,xv:2,yv:1,o:1});
- for(var i=0;i<y.length;i++){
- y[i].o-=b.o/10;
- ctx.globalAlpha = y[i].o;
- y[i].x+=(Math.random()-.5)*4;
- y[i].y-=1;
- ctx.fillRect(y[i].x,y[i].y,2,2);
- if(y[i].o<=0){
- y.splice(i,1);
- i--;
- };
- }
- }
- window.requestAnimationFrame(begin);
- }
- function re(){
- w = window.innerWidth;
- h = window.innerHeight;
- canvas.width = w;
- canvas.height = h;
- cx = w/2;
- cy = h/2;
- };
- c.mousemove(function(e){
- cx = e.pageX-c.offset().left;
- cy = e.pageY-c.offset().top;
- if(tp4){
- if(Math.random()<=.5){
- if(Math.random()<=.5){
- bx = -10;
- }else{
- bx = w+10;
- }
- by = Math.random()*h;
- }else{
- if(Math.random()<=.5){
- by = -10;
- }else{
- by = h+10;
- }
- bx = Math.random()*w;
- }
- vx = (Math.random()-.5)*8;
- vy = (Math.random()-.5)*8;
- }
- if(tp1 || tp2 || tp3){
- y.push({x:cx,y:cy,r:b.r,o:1,v:0});
- }else if(tp4){
- y.push({x:cx,y:cy,r:b.r,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});
- }else if(tp6){
- y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});
- }
- });
- /*c.mousedown(function(){
- c.on('mousemove',function(e){
- cx = e.pageX-c.offset().left;
- cy = e.pageY-c.offset().top;
- y.push({x:cx,y:cy,r:b.r,o:1});
- });
- c.on('mouseup',function(){
- c.off('mouseup');
- c.off('mousemove');
- c.off('moseleave');
- });
- c.on('mouseleave',function(){
- c.off('mouseup');
- c.off('mousemove');
- c.off('moseleave');
- });
- });*/
- $("#btn1").click(function(){
- tp1 = true;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn2").click(function(){
- tp1 = false;
- tp2 = true;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn3").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = true;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn4").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = true;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn5").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = true;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn6").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = true;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn7").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = true;
- tp8 = false;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn8").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = true;
- tp9 = false;
- tp0 = false;
- y=[];
- });
- $("#btn9").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = true;
- tp0 = false;
- y=[];
- });
- $("#btn0").click(function(){
- tp1 = false;
- tp2 = false;
- tp3 = false;
- tp4 = false;
- tp5 = false;
- tp6 = false;
- tp7 = false;
- tp8 = false;
- tp9 = false;
- tp0 = true;
- y=[];
- });
- (function() {
- var lastTime = 0;
- var vendors = ['webkit', 'moz'];
- for(var xx = 0; xx <vendors.length && !window.requestAnimationFrame; ++xx) {
- window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
- window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
- window[vendors[xx] + 'CancelRequestAnimationFrame'];
- }
- if (!window.requestAnimationFrame) {
- window.requestAnimationFrame = function(callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
- var id = window.setTimeout(function() {
- callback(currTime + timeToCall);
- }, timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
- if (!window.cancelAnimationFrame) {
- window.cancelAnimationFrame = function(id) {
- clearTimeout(id);
- };
- }
- }());
- begin();
- });
- </script>
- </html>
来源: http://www.qdfuns.com/article/39453/0db90ce733cfbb9f54bf66f5b48c13c1.html