canvas缓动2

同之前的缓动原理。这里将终点换成鼠标,做出跟随效果

var canvas = document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var ballX=0,ballY=0,esaing=0.1;
function Ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.speed=speed;
}
var balles=[];
balles.push(new Ball(20,20,20,{x:0,y:0}));
var b=balles[0];
function draw(){
cxt.beginPath();
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.fillStyle="red";
b.x+=(point.x-b.x)*0.0001;
b.y+=(point.y-b.y)*0.0001;
cxt.arc(b.x,b.y,b.radius,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
requestAnimationFrame(draw);
}
var point
function move(event){
var x=event.point.x;
var y=event.point.y;
point=event.point
draw();
}
function down(event){}
function up(event){}
tool.MT(canvas,move,down,up);

上一篇:join,left join,inner join,full join的区别?


下一篇:inline-block元素间留白现象探究