鼠标上的canvans

<!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>

时间： 2024-12-09 03:53:26

鼠标上的canvans的相关文章

鼠标样式在网页上鼠标上生成气泡

<HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;"></div> <IMG id=B src="b1.gif" styl

鼠标 DPI与CPI

何为dpi: dpi英文全称是“dots per inch”,直译为“每英寸像素”,意思是每英寸的像素数.(1 英寸=2.54cm),是指鼠标内的解码装置所能辨认每英寸长度内像素数.(屏幕上最小单位是像素).这是一个静态的单位,所以该参数一般都是应用在打印机和扫描机上. 举个简单的例子:加入我们使用的是400dpi的微软IE3,那么鼠标在鼠标垫上每移动一英寸,鼠标指针便会在屏幕上移动400个像素点,那么800dpi就是移动800的点,以下类推. 何为cpi: 为什么有的鼠标上标注的又是cpi呢?

JS 鼠标事件大全

一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

js鼠标事件

参考:http://www.jb51.net/article/28772.htm 一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4

论触摸板是比鼠标更先进的输入方式

大约半年之前,我一直在用鼠标.后来因为手指疼,以及经常需要在鼠标和键盘之间切换,所以逐渐开始尝试使用触摸板代替鼠标.现在我已经完全不再用鼠标,而是全部用触摸板+键盘工作.在这个过程中,我体会到,在绝大部分情况下,触摸板都比鼠标便捷,至少不比鼠标差.因此用这篇文章和大家分享一下这个过程中的体会. 触摸板的输入方式 首先介绍一下我用的笔记本电脑上触摸板的输入方式.一个是Thinkpad E330,它的触摸板前方有三个键,大致分别对应于鼠标的左右键和滚轮,而触摸板本身也可以按下去,相当于单击左键.另外

Delphi下利用WinIo模拟鼠标键盘详解

http://www.cnblogs.com/rogee/archive/2010/09/14/1827248.html 本文最早在编程论坛上发表,文章地址:http://programbbs.com/bbs/view12-17207-1.htm,相关文件可以在上述地址的页面中下载.转载时请注明出处. 前言 一日发现SendInput对某程序居然无效,无奈只好开始研究WinIo.上网查了很多资料,发现关于WinIo模拟鼠标键盘的资料很少,有的也只是支言片语讲的不是很详细,而且大部分都是关于模拟键

linux 处理键盘 鼠标事件

Linux下鼠标和键盘的模拟控制,也就是为手势和语音控制鼠标和键盘部分服务的. 有关于本系统构建的文章结构都会由三个部分来组织,一是该功能模块的介绍和在Linux下简单应用程序的实现:二是将该功能模块整合到交互系统(先以TLD为地基)中去:三是分析目前存在的问题与未来的解决构思. 一.input子系统和模拟程序编写: Linux 输入子系统是 Linux内核用于管理各种输入设备(键盘,鼠标,遥控杆,书写板等等)的.输入子系统分为三块: input core, drivers和 event han

JS鼠标事件大全

一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

JS鼠标事件大全 推荐收藏

一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3