用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><!-- body{ background:rgba(200,205,255,1); padding:auto;} nav{ margin:10px 300px; border:1px solid #888800;} --></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.οnlοad=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.οnmοusemοve=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.οnmοuseοver=function (event){ for(var i=0;i<140;i++){ list[i]=event;} timer=setInterval(each,80);} canvas.οnmοuseοut=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.οnmοuseοver=count; var timer; function count(){ timer=setInterval(arrange,100);} canvas.οnmοuseοut=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.οnmοusemοve=function (event){ pos=event; //console.log(pos+'5'); } var n=20; var timer; console.log(ctx+'g'); console.log(pos+'0'); canvas.οnmοuseοver=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.οnmοuseοut=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();}
