canvas画出圆球运动，并可以控制方向和停止

canvas动画，并可以用上下左右箭头控制方向，空格键是停止，代码如下

点击(此处)折叠或打开

<!DOCTYPE html >
<html>
<head>
<title>cars</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<canvas id ="canvas" width="200" height="200"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var circle = function(x,y,radius,fillCircle){
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2,false);
if(fillCircle){
ctx.fill();
}else{
ctx.stroke();
}
}
//the ball constructor
var Ball = function(){
this.x = width/2;
this.y = height/2;
this.xSpeed = 5;
this.ySpeed = 0;
}
//update the ball's position based on its speed
Ball.prototype.move = function(){
this.x += this.xSpeed;
this.y += this.ySpeed;
if(this.x
this.x = width;
}else if(this.x>width){
this.x =0;
}else if(this.y
this.y = height;
}else if(this.y >height){
this.y =0;
}
}
//draw the ball at its current position
Ball.prototype.draw = function(){
circle(this.x,this.y,10,true);
}
//set the ball's direction based on a string
Ball.prototype.setDirection = function(direction){
if(direction === "up"){
this.xSpeed = 0;
this.ySpeed = -5;
}else if(direction === "down"){
this.xSpeed = 0;
this.ySpeed = 5;
}else if(direction === "left"){
this.xSpeed = -5;
this.ySpeed = 0;
}else if(direction === "right"){
this.xSpeed = 5;
this.ySpeed = 0;
}else if(direction === "stop"){
this.xSpeed = 0;
this.ySpeed = 0;
}
}
//create the ball object
var ball = new Ball();
//an object to convert keycodes into action names
var keyActions = {
32:"stop",
37:"left",
38:"up",
39:"right",
40:"down"
};
//the keydown handler that will be called for every keypress
$("body").keydown(function(event){
var direction = keyActions[event.keyCode];
ball.setDirection(direction);
});
//the animation function,called every 30ms
setInterval(function(){
ctx.clearRect(0,0,width,height);
ball.draw();
ball.move();
ctx.strokeRect(0,0,width,height);
},30);
</script>
</html>

甜心183

canvas画出圆球运动，并可以控制方向和停止