广东 广州     国内第一流的专业网络营销培训、淘宝电商培训、电脑设计培训教程中心
网络营销选择培训班
新川教育-专业的网络营销培训机构
如何使用Canvas创建动画《HTML5系列教程24》-广州番禺新川教育(原远行教育)。
   如何使用Canvas创建动画《HTML5系列教程24》

来源:广州新川(原远行教育) 阅读数:753
添加时间:2017-5-13   类别:网页设计教程

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

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


1.清除Canvas的内容

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

在HTML5中清除Canvas的内容代码示例

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

在HTML5中清除Canvas的内容效果预览示例

2.创建动画

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

  1. 指定坐标点(100,100)为圆心,绘制半径为0的圆。
  2. 间隔10毫秒后,清除之前绘制的图形。
  3. 再次以坐标点(100,100)为圆心,绘制半径为1的圆,依此类推,知道圆的半径等于100.
  4. 继续以坐标点(100,100)为圆心,绘制半径为99的圆,依此类推,直到圆的半径等于0.
  5. 然后再增加圆的半径,这样让动画往返运动。

    创建动画的代码如图

在HTML5中使用Canvas创建动画的代码

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

在HTML5中使用Canvas创建动画在浏览器中的预览效果

3.动画的开始于停止

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

<button onclick="tt=setInterval(action,10);">开始</button>>
<button onclick="clearInterval(tt);">停止</button>

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

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

在谷歌浏览器中预览添加了按钮的效果

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

客服中心

点击这里给我发消息
黎老师

扫描添加微信号

广州新川教育微信号

展开客服

      友情链接

学校简介 |  教学优势   |   开班信息     |   学员作品  |   学校图片  |  师资介绍 |   资料下载   
工作推荐  |   就业精英   |  平面设计  |   室内设计  |  办公文秘 |   办公文秘教程 | 美术培训  | site map
地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话:020-84829690 84824066 咨询QQ:522961923  点击这里给我发消息
(4,5,6B,8,10,12,13,160,147路公共汽车在番禺中医院站或百德商业中心站下车即到)
(3,11,18,22,22B,51B,92,96,97,99,100,102,105,141,148,149,150,150B,303,309,310路公共汽车在交通大厦站下车,向番禺中医院方向走大约200米即到。)
1,20,20B,9路公共汽车到市桥大桥北站下车,向番禺中医院方向走100米左右即到。)
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

 新浪微博     新浪博客   天涯博客    和讯博客