02-直线移动
5.1 直线移动
对于最简单的动画——让对象在画布上呈直线上下运动——可以采用每次为对象绘制的x坐标和y坐标添加常量的方式来实现。
那么，要想为图像设置动画效果，就要为它创建一个间隔，然后在每一帧中调用显示更新的图像的函数。本章中的每个示例都采取类似的方式建立。第一步是在canvasApp()函数中设置必要的变量。每次调用drawScreen()函数时，都会将这些值应用到对象的y坐标上。变量x和y设置了对象的初始位置，之后，一个填充的圆将在画布上向下移动。
var speed = 5;
var y = 10;
var x = 250;创建好这些变量后，设置一个间隔，每20ms调用一次drawScreen()函数。这将循环更新对象并使其环绕画布运动。
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}
gameLoop();在drawScreen()函数中，通过加上speed变量值的方式来更新y变量的值。
y += speed;最后，把这个圆绘制到画布上，使用当前的x值和y值将其定位。由于y值在每次函数调用时都会被更新，因此这个圆会立即向画布下方移动。
context.fillStyle = "#000000";
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();要想让这个圆向屏幕上方移动，只需将speed变量设为负值即可。要想进行左右运动，只需将x变量像y变量那样更新即可。若想沿对角线运动，则需要同时更新x变量和y变量。
例5-1显示了创建基本直线移动的完整代码。
例5-1 直线移动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX1: Moving In A Straight Line</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport (){
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()){
return;
}
function drawScreen (){
context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//边框
context.strokeStyle = '#000000';
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
//创建一个球
y += speed;
context.fillStyle = "#000000";
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
}
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
var speed = 5;
var y = 10;
var x = 250;
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>提示
本章所有示例的HTML基本结构都将遵循这些原则。为节省空间，以后将不在讨论这段代码。不过别担心，它还会在本文提供的示例中出现。