用canvas做一个鼠标改变矩形位置的缓冲运动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标div移动</title>
    <style>
        canvas{
            background: silver;
        }
    </style>
    <script>
 
        var oCanvas;
        var context;
        var Rect={x:0,y:0};//矩形的坐标
        var timer=null;
        window.onload=function(){
 
            oCanvas=document.getElementById("canvas");
            context=oCanvas.getContext("2d");
            context.fillStyle='red';
            context.fillRect(Rect.x,Rect.y,100,100);
 
        }
 
        function Draw(ev){
 
            var oEvent=ev||window.event;
 
            if(1==oEvent.which){//鼠标左击
 
                //alert("点击了左键");
                var delX=oEvent.clientX-Rect.x;
                var delY=oEvent.clientY-Rect.y;
                document.getElementById("text2").value="delX:"+oEvent.clientX+",delY:"+oEvent.clientY;
                //startMove(delX,delY);
                moveobj.setTxy(delX,delY);
 
            }
        }        var moveobj = {
            xy:[0,0]            //当前中心坐标
            ,lastxy:[0,0]       //上一次的坐标
            ,txy:[0,0]          //目标位置
            ,speed:[1,1]        //速度 [xspeed,yspeed]
            ,r:50              //半径长度
            ,isRun:false        //当前移动中？
            ,runHandler:null        //
            ,update:function(){             //更新属性（这里就是坐标了）
                if(this.xy[0] == this.txy[0] && this.xy[1] == this.txy[1]){
                    this.endRun();
                }else{
                    this.lastxy[0] = this.xy[0];
                    this.lastxy[1] = this.xy[1];
                    var dx = this.txy[0] - this.xy[0];  //x移动差距
                    if(dx != 0){
                        var dxt = Math.abs(dx);
                        var speedx = this.speed[0];
                        if(dxt<=speedx){
                            this.xy[0] = this.txy[0];
                        }else{
                            this.xy[0]+=dx>0?speedx:-speedx;
                        }
                    }                    var dy = this.txy[1] - this.xy[1];  //y移动差距
                    if(dy != 0){
                        var dyt = Math.abs(dy);
                        var speedy = this.speed[1];
                        if(dyt<=speedy){
                            this.xy[1] = this.txy[1];
                        }else{
                            this.xy[1]+=dy>0?speedy:-speedy;
                        }
                    }                }            }
            ,renderer:function(){               //渲染
                //清楚画板
                //绘制当前对象
                var r2 = this.r*2;
                context.clearRect(this.lastxy[0] - this.r,this.lastxy[1] - this.r, r2, r2);                context.fillRect(this.xy[0] - this.r,this.xy[1] - this.r, r2, r2);            }
            ,setTxy:function(x,y){
                this.txy = [x,y];
                this.run();
            }
            ,run:function(){            //开始动画
                if(!this.isRun){
                    this.isRun = true;
                    var me = this;
                    this.runHandler =setInterval(function(){
                        me.update();
                        me.renderer();
                    },10);
                }
            }
            ,endRun:function(){         //结束动画
                this.isRun = false;
                clearInterval(this.runHandler);
                this.runHandler = null;
            }
        }        moveobj.run();
    </script>
</head>
<body style="margin: 0">
 
<canvas id="canvas" width="500" height="500" onclick="Draw()"></canvas>
<input type="text" id="text1">
<input type="text" id="text2">
</body>
</html>1）页面matgin：0  防止margin的宽度影响坐标计算
2）面向对象 写复杂过程的不二法宝
3）update  renderer  （动画就是这2个方法的循环调用）
好吧 还是你的代码  我只是封装了下