應用動畫時需關注動畫所實現的環境，動畫對象需要根據環境的變化而改變運動狀態。這裏系統總結處理物體越界以及應用摩擦力的公式。
注：
left爲環境右部邊界所在座標x值;
right爲環境左部邊界所在座標x值;
top 爲環境頂部邊界所在座標y值;
bottom爲環境底部邊界所在座標y值。
1、移除越界的對象
if(object.x - object.width/2 > right || object.x + object.width/2 < left ||object.y - object.height/2 > bottom || object.y + object.height/2 < top){
//移除對象代碼塊
}2、重置越界的對象
if(object.x - object.width/2 > right || object.x + object.width/2 < left ||object.y - object.height/2 > bottom || object.y + object.height/2 < top){
//重置對象狀態代碼塊
}3、設置對象爲屏幕環繞
if(object.x - object.width/2 > right){
object.x = left - object.width/2;
}else if(object.x + object.width/2 < left){
object.x = right + object.width/2;
}
if(object.y - object.height/2 > bottom){
object.y = top - object.height/2;
}else if(object.y + object.height/2 < top){
object.y = bottom + object.height/2;
}4、應用摩擦力（正確方法）
speed = Math.sqrt(vx * vx + vy * vy);
angle = Math.atan(vy , vx);
if(speed > friction){
speed -= friction; //friction代表摩擦效果，可設爲0.1
}else{
speed = 0;
}
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;5、應用摩擦力（簡便方法）
vx *= friction; //friction代表摩擦效果，可設爲0.98
vy *= friction;這裏講前面的飛船應用稍加改變，添加屏幕環繞和摩擦效果。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飛船</title>
<style type="text/css">
#canvas{background-color: #000}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="ship.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
ship = new Ship(),
vr = 0,
vx = 0,
vy = 0,
thrust = 0;
friction = 0.98; //摩擦係數
ship.x = canvas.width/2;
ship.y = canvas.height/2;
window.addEventListener("keydown",function(event){
switch(event.keyCode){
case 37: //left
vr = -5;
break;
case 39: //right
vr = 5;
break;
case 38: //up
thrust = 0.1;
ship.showFlame = true;
break;
}
},false);
window.addEventListener("keyup",function(event){
vr = 0;
thrust = 0;
ship.showFlame = false;
},false);
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ship.rotation += vr * Math.PI/180;
var angle = ship.rotation,
ax = Math.cos(angle)*thrust,
ay = Math.sin(angle)*thrust,
left = 0,
right = canvas.width,
top = 0,
bottom = canvas.height;
vx += ax;
vy += ay;
vx *= friction; //添加摩擦效果
vy *= friction; //添加摩擦效果
ship.x += vx;
ship.y += vy;
//屏幕環繞
if (ship.x - ship.width/2 > right) {
ship.x = left - ship.width/2;
}else if(ship.x + ship.width/2 < left){
ship.x = right + ship.width/2;
}
if(ship.y - ship.height/2 > bottom){
ship.y = top - ship.height/2;
}else if(ship.y + ship.height/2 < top){
ship.y = bottom + ship.height/2;
}
ship.draw(context);
}());
}
</script>
</body>
</html>參見《HTML5+Javascript動畫基礎》。