薯条,,鼠标轨迹

来源：互联网发布：深圳积分入学算法编辑：程序博客网时间：2024/04/27 14:35

用canvas做了鼠标轨迹,,

很奇怪为什么其他的html5用什么办法做到那么细腻呢?

代码保存,,js部分中间大部分为调试用,,从plan()函数开始,

中间的几乎是另一个demo了,,主要是list列表的处理不同,,

然后line(),curve()函数,,qua(),bezier()几个可以替换一下的,,

markpois()函数是标记点的,,直接用代码,,

在firefox4调试的,,就是那个以后要消失的minefield..

<html><head><mce:script src="tail.js" mce_src="tail.js"></mce:script><mce:style></mce:style><style mce_bogus="1">body{background:rgba(200,205,255,1);padding:auto;}nav{margin:10px 300px;border:1px solid #888800;}</style></head><body><nav><canvas width="600px"id="canvas"height="400px"></canvas></nav></body></html> window.onload=plan;function start(){var canvas=document.getElementById('canvas');var ctx=canvas.getContext('2d');var list=new Array(140);list=get(canvas,list);draw(ctx,canvas,list);console.log(canvas);}function get(canvas,list){canvas.onmousemove=judge;var e;function judge(event){e=event;for(var i=0;i<139;i++){list[i]=list[i+1];}list[139]=e;}return list;}function draw(ctx,canvas,list){var listd;canvas.onmouseover=function (event){for(var i=0;i<140;i++){list[i]=event;}timer=setInterval(each,80);}canvas.onmouseout=function (){clearInterval(timer);}function each(){ctx.fillStyle='rgba(255,255,255,1)';ctx.fillRect(0,0,600,400);//console.log(listd);if(list==listd){console.log('happend');for(var i=0;i<139;i++){list[i]=list[i+1];}}listd=list;ctx.beginPath();console.log(list[0]);ctx.moveTo(list[0].pageX-309,list[0].pageY-11);for(var i=1;i<140;i++){x=list[i].pageX-309;y=list[i].pageY-11;ctx.lineTo(x,y);}ctx.stroke();}}function daw(ctx){ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.stroke();console.log(canvas.offsetTop);console.log(canvas.offsetLeft);}function set(canvas){console.log('running');var e;var list=[];for(var i=0;i<20;i++){list.push('0');}canvas.onmouseover=count;var timer;function count(){timer=setInterval(arrange,100);}canvas.onmouseout=stay;function stay(){clearInterval(timer);}console.log(list);function arrange(list){for(i=0;0<19;i++){console.log(list);//list[i]=list[i+1];}list[19]=e;console.log('done');console.log(list);}}function test(variable){for(i in variable){console.log(i);}}function plan(){var pos;var canvas=document.getElementById('canvas');var ctx=canvas.getContext('2d');//console.log(ctx);main(canvas,ctx);}function main(canvas,ctx){var pos;canvas.onmousemove=function (event){pos=event;//console.log(pos+'5');}var n=20;var timer;console.log(ctx+'g');console.log(pos+'0');canvas.onmouseover=function (event){var ev=event;//console.log('ctx'+ctx);//console.log(pos+'6');var list=[];for(var i=0;i<n;i++){list[i]=ev;//console.log(pos+'pos');}console.log(list);timer=setInterval(function (){//console.log(pos+'6');//console.log(list[0]);list=arrange(ctx,list,pos,n);},60);}canvas.onmouseout=function (){clearInterval(timer);}var pois=[];function arrange(ctx,list,pos,n){//console.log(list);for(var i=0;i<n-1;i++){list[i]=list[i+1];}list[n-1]=pos;var p0={x:list[n-1].pageX,y:list[n-1].pageY}var p1={x:list[n-2].pageX,y:list[n-2].pageY}var p2={x:list[n-3].pageX,y:list[n-4].pageY}var a=Math.pow(p0.x-p1.x,2)+Math.pow(p0.y-p1.y,2);var b=Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2);a=Math.sqrt(a);b=Math.sqrt(b);var pa={x:(p0.x-p1.x)/a||0,y:(p0.y-p1.y)/a||0}var pb={x:(p1.x-p2.x)/b||0,y:(p1.y-p2.y)/b||0}var d=Math.pow(pa.x+pb.x,2)+Math.pow(pa.y+pb.y,2);//console.log(a,' ',b,' ',d);console.log(list[n-1]);if(d<3&&a+b>0){console.log('has');pois.push(list[n-1]);if(pois.length=8){pois=pois.slice(1,pois.length);}console.log(pois);}else{console.log('no');}//curve(ctx,list,n);//line(ctx,list,n)curve(ctx,list,n);//console.log(ctx);//console.log(pois);markpois(ctx,pois);return list;}}function markpois(ctx,pois){for(i in pois){ctx.fillStyle='rgba(100,100,255,1)';ctx.fillRect(pois[i].pageX-309,pois[i].pageY-11,10,10);}}function bezier(ctx,list,n){for(var i=0;i<n-4;i++){x0=cal(list,i);x1=cal(list,i+1);x2=cal(list,i+2);x3=cal(list,i+3);ctx.moveTo(x0.x,x0.y);ctx.bezierCurveTo(x1.x,x1.y,x2.x,x2.y,x3.x,x3.y);}ctx.stroke();}function curve(ctx,list,n){ctx.fillStyle='rgba(255,255,255,1)';ctx.fillRect(0,0,600,400);ctx.beginPath();bezier(ctx,list,n);}function qua(ctx,list,n){console.log('here done');for(var i=0;i<n-3;i++){x0=cal(list,i);x1=cal(list,i+1);x2=cal(list,i+2);ctx.moveTo(x0.x,x0.y);ctx.strokeStyle='rgba(0,0,0,1)';ctx.quadraticCurveTo(x1.x,x1.y,x2.x,x2.y);}ctx.stroke();}function cal(list,n){var p={x:0,y:0}p.x=list[n].pageX-309;p.y=list[n].pageY-11;return p;}function line(ctx,list,n){ctx.beginPath();ctx.fillStyle='rgba(255,255,255,1)';ctx.fillRect(0,0,600,400);ctx.moveTo(list[0].pageX-309,list[0].pageY-11);for(var i=1;i<n;i++){ctx.lineTo(list[i].pageX-309,list[i].pageY-11);}ctx.stroke();}