<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');  // 获取画布元素
    var context = canvas.getContext('2d');             // 获取2D绘图上下文

    // 定义物体的初始位置和宽高，以及速度
    var x = 10;  // x轴坐标，即物体的横向位移大小 
    var y = 10;  // y轴坐标，即物体的纵向位移大小 
    var w = 20;  // 宽度  
    var h = 20;  // 高度  

    /* vx, vy分别表示x轴方向和y轴方向上的速度 */  
    var vx = 1;   // x轴方向上的速度（正数表示往右）  
    var vy = 0.5; // y轴方向上的速度（正数表示往下）

     function draw(){     

        context.clearRect(0,0,200,100);     /* 清除画布 */     

        context.fillStyle="#FF0000";         /* 用"#FF0000"颜色填充 */     

        context.fillRect(x,y,w,h);          /* 画一个实心正方形 */     

        x += vx;                            /* 更新物体在X轴上的当前位移 */     

        y += vy;                            /* 更新物体在Y轴上的当前位移 */