- <!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.w3cfuns.com/notes/39453/0db90ce733cfbb9f54bf66f5b48c13c1.html