$("button").on("click",function(){
    /**
     * 通过transition的方式改变运动
     */
    $(".bird").transition({
        'right': '3em',
    }, 1000, 'linear',function(){
        alert("end")    
    })
})

<canvas id="cvs" height="400"></canvas>

    <script type="text/javascript">

     //第一步：获取canvas元素

    var cvs = document.getElementById('cvs'); //画布

     //第二步：获取上下文

    var ctx = cvs.getContext('2d'); // 画笔

    //第三步：指定绘制线样式、颜色

    ctx.strokeStyle = "red";

    //第四步：绘制矩形，只有线。内容是空的

    ctx.strokeRect(10, 10, 190, 100);

    //以下演示填充矩形。

    ctx.fillStyle="blue";

    ctx.fillRect(110,120,100,100);

    </script>