【网页设计】如何使用Canvas创建动画《HTML5系列教程24》 清除Canvas的内容2.创建动画3.动画的开始于停止

W-design2017.06.06

如何使用Canvas创建动画《HTML5系列教程24》

动画是由一帧一帧的图像组合而成的，这些相信学过Flash的朋友都知道的，那么如何使用Canvas创建动画呢，那就需要在Canvas中间隔一定时间绘制多幅连续运动的图像，这样就能够实现动画效果了。

清除Canvas的内容

既然能够在Canvas中绘制图形，那么是否也能够在Canvas中清除内容呢？答案是肯定的。Canvas中提供了clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容。清除指定矩形Canvas的内容的代码如图：

在谷歌浏览器中预览的效果如图

2.创建动画

现在让我们来动手练习如何创建一个简单的动画。创建步骤如下所示：

创建动画的代码如图

在谷歌浏览器中预览的效果如图

3.动画的开始于停止

现在我们在HTML中添加两个按钮，分别用于控制动画的开始于停止，添加的代码如下所示。

＜button＞开始＜/button>＞
＜button＞停止＜/button＞

这里的setinterval用于控制时间间隔，我们设置影响的函数为action函数，设置时间间隔为10毫秒，并用变量tt接收返回的值。停止按钮上调用clearInterval函数，取消由setinterval设置的时间间隔。这里要注意的是，因为现在我们通过按钮来控制动画的开始与停止，所以就必须删除上图代码中的：
onload=setinterval(action,10);

下图是添加了开始和停止按钮后在谷歌浏览器的中的效果

这便是在HTML5中如何使用Canvas创建动画的方法了，大家可以都去试一下，可以自己去试着增加一些步骤，看能不能绘制出更多的效果。了解更多精彩资讯请添加我们的官方微信：pyyuanxing！谢谢大家的观看。祝大家：身体健康、生活愉快！

☆☆☆推荐阅读☆☆☆

【网页设计】URL与图像数据《HTML5系列教程23》

【网页设计】绘制简单文字效果《HTML5系列教程22》

【网页设计】图像的使用《HTML5系列教程21》

【网页设计】绘制阴影和透明效果《HTML5系列教程20》

原文链接：

上一篇：新网站如何做优化 2017新站优化全新教程

下一篇：网页制作教程：怎么样设计网页？