canvas让一个物体平滑的移动

```html <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轴上的当前位移 */ requestAnimationFrame(draw); /* 通过requestAnimationFrame()函数不断重复执行draw()函数来更新动画*/ } draw();</script> </body> </html>