Canvas 数学、物理、动画学习笔记一
Canvas 第五章 数学、物理和运动学习笔记
让人映像深刻的运动，需要我们不只是简单的知道如何移动对象，还需要知道怎么按用户期望看到的方式去移动它们。这些需要基于数学知识的基本算法和物理学作用。
基于点和矢量的简单运动提供了一个基础，现在可以去创建些例如碰墙弹回和别一个有点摩擦的混合。之后，我们将回过来讲讲非直线式运动。例如：圆、螺旋型和复杂的贝塞尔曲线的。我们还将涉及影响运动的重力。最后，我们将以讨论缓动和如何使用它来做好基于数学的运动结束本章。
移动一根直线
作为最简单的运动，水平上线的移动一个物体。我们只需要每次绘制时改变x,y值即可。
因此，对于我们的运动绘图来说。我们需要创建一个定时器，并且调用一个能够在每一帧绘制或更新绘制的函数。本章的例子都会使用类似的这种方法来实现。首先，让我们来准备canvasApp()函数需要的基本变量。对于这个基本的运动，我们将创建一个基本的speed变量，我们将在每次调用drawscreen()函数时将这个值交给运动对象的y值。变量x,y 是我们将要在canvas 中移动 的对象的初始位置。
var speed = 5;
var y = 10;
var x = 250;
创建完这些变量后，我们来创建一个每33毫秒调用drawScreen()函数的定时器。这个函数让我们在canvas 里移动和擦除元素。
setInterval(drawScreen,33);
在drawScreen()函数里，我们给y变量每次增加speed值
y += speed;
最后，我们在canvas 里画圆。我们用x,y的当前值来定位这个圆。因为y一直在变，我们可以看到圆在往下移。
context.fillStyle = "#000000";
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
如果要往上移这个圆，我们可以减去speed,如果要左右移，我们可以修改x的值，要斜着移动，可以同时改变x,y的值。
下面是范例代码
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
function drawScreen() {
context.fillStyle = '#EEE';
//context.fillRect(0,0,theCanvas.width,theCanvas.height);
context.strokeStyle = '#000';
//context.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);
y += speed;
context.fillStyle = '#000';
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 x = 150,
y = 10,
speed = 5;
setInterval(drawScreen,100);
}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support canvas
</canvas>
</div>
</body>
</html>
温习一下canvas 的基本API
由id得到canvas 对象 theCanvas = document.getElementById('canvasOne');
context theCanvas.getContext("2d");
fillStyle 填充样式 fillRect 填充矩形
strokeStyle 勾框样式 strokeRect 只有框的， beginPath 开始 closePath 结束 fill填充
两点间的移动 线性距离