如何使用HTML5 Canvas标签创建动画 - 傻瓜

虽然HTML5画布标签可能无法代替Flash作为在浏览器中实现游戏和动画的机制，但添加动画是相当容易的一个画布图像。关键是要使用已经内置到浏览器中的动画功能。

HTML5画布中动画循环的基本结构

动画通常需要一个称为动画循环的特殊组织。动画循环的基本结构在任何语言中都是相同的：

<！ --1 - >

初始化。

创建资产，包括背景和您将使用的任何对象。将被实时操作的对象通常称为精灵。一般来说，这是在程序第一次运行时完成的，以节省主执行期间的时间。您还可以设置图像大小，显示大小，帧速率以及在游戏执行期间不会改变的其他值的常数。

确定一个帧速率。
动画和游戏通过以规定的速度重复调用函数来工作。在JavaScript中，通常使用setInterval（）函数来指定重复函数。

帧频表示指定功能被调用的频率。游戏和动画通常以每秒10到30帧的帧率运行。更快的帧速率更平滑，但某些硬件可能无法维护。

评估当前状态。每个精灵都是一个数据元素。在每一帧期间，确定是否发生了重要的事情：用户是否按下了一个键？是一个元素应该移动？精灵离开了屏幕？两个精灵是否相互对话？
修改精灵数据。

每个精灵通常都有位置或旋转数据，可以在每个帧中进行修改。通常这是通过转换（平移，旋转和缩放）完成的，但有时您可能会在图像之间切换。
清除背景。

动画实际上是一系列在同一个地方迅速绘制的图像。通常，您需要清除每帧开始处的背景以清除最后一帧的图像。重新绘制所有的精灵。
使用新数据重绘每个精灵。精灵似乎移动，因为他们被绘制在一个新的位置或方向。

在HTML5画布中创建动画功能的常量
构建在画布内旋转图像的程序需要几批代码。第一个工作是设置描述问题的各种变量和常量。以下代码是在任何函数之外创建的，因为它描述了将在函数之间共享的值：

var drawing; var con; var goofyPic; var angle = 0; CANV_HEIGHT = 200; CANV_WIDTH = 200; SPR_HEIGHT = 50; SPR_WIDTH = 40;

绘图变量将引用canvas元素。 con变量将是绘图上下文，goofyPic是要旋转的图像，角度将用于确定图像当前旋转了多少。其他值是用于描述画布的高度和宽度以及精灵的常量。

在HTML5画布中部署动画

使用主体加载机制在页面加载完成后立即启动一些代码。但是，该页面现在有两个功能。 init（）函数处理初始化，draw（）函数将被重复调用来处理实际的动画。下面是init（）函数中的代码：

function init（）{drawing = document。的getElementById（ “绘图”）; con =绘图。的getContext（ “2D”）; goofyPic =文件。的getElementById（ “goofyPic”）; setInterval（draw，100）;} // end init

init（）函数的作用是初始化事物。在这个特定的例子中，各种元素（画布，上下文和图像）被加载到JavaScript变量中，并设置动画。 setInterval（）函数用于设置主动画循环。它有两个参数：

一个可重复的函数：

第一个参数是将被重复调用的函数的名称。在这种情况下，绘图函数会被多次调用。

延迟值：

第二个参数指示应该以毫秒（1/1000秒）调用函数的频率。延迟100将创建每秒10帧的帧速率。延迟50会导致每秒20帧的帧速率，依此类推。 将动画提供给HTML5画布中的当前帧
draw（）函数将连续多次调用。一般来说，它的任务是清除框架，计算新的精灵状态，并重新绘制精灵。这里是代码： function draw（）{// clear background con。 fillStyle =“white”; CON。 fillRect（0，0，CANV_HEIGHT，CANV_WIDTH）; //绘制边框strokeStyle =“red”; CON。 lineWidth =“5”; CON。 strokeRect（0，0，CANV_WIDTH，CANV_HEIGHT）; //改变旋转角度+ =。 25; if（angle> Math。PI * 2）{angle = 0;} //开始一个新的转换系统con。保存（）; CON。翻译（100，100）; CON。旋转（角度）; //绘制图像con。 drawImage（goofyPic，SPR_WIDTH / -2，SPR_HEIGHT / -2，SPR_WIDTH，SPR_HEIGHT）; CON。 restore（）;} // end draw

虽然代码可能有点牵扯，但它并没有真正做新的事情：

清除背景。请记住，动画是重复绘制。如果你没有在每一帧的开始清除背景，你会看到以前的框架图。使用上下文的clearRect（）函数绘制新的背景，或使用其他绘图工具之一来使用更复杂的背景图像。

绘制任何非Sprite内容。

例如，您可以使用strokeStyle，lineWidth和strokeRect（）在画布周围构建一个红色矩形框。请注意，CANV_HEIGHT和CANV_WIDTH常量引用当前的画布大小。

修改精灵状态。

在示例中，要修改图像的旋转角度，称为角度的变量是在该函数之外创建的。（在函数上下文之外创建角度非常重要，所以它可以在调用函数之间保留它的值）。然后，您可以添加少量角度来处理每一帧。
每当你改变一个变量（特别是在一个像动画一样的无限循环中），你应该检查边界条件。允许的最大角度值（弧度）是pi的两倍。如果角度变大，则重置为零。建立一个转型。使用save（）方法设置新的转换，并使用rotate（）和translate（）函数转换临时坐标系。

许多动画都是对转换的真正修改。图像不变，只是包含图像的转换。
在新变换的中心绘制图像。

drawImage（）命令根据图像的左上角绘制图像。如果在新变换的（0，0）处绘制图像，则图像将围绕其左上角旋转。通常，你会想要一个图像绕中心点旋转。只需绘制图像，使其中心位于原点。将X设置为零减去图像宽度的一半，将Y设置为零减去图像高度的一半。

关闭转换。使用restore（）方法来完成临时坐标系的定义。