广东 广州     专业、实战网络营销培训、淘宝电商培训、电脑设计培训教程中心
2018年新春学费优惠及放假通知!
新川教育-专业的网络营销培训机构
网络营销培训咨询提示
面授+在线教育+视频课程销售一体化.
网络营销选择培训班
如何使用Canvas创建动画《HTML5系列教程24》

来源:新川教育 阅读数:1185
添加时间: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!谢谢大家的观看。祝大家:身体健康、生活愉快!

客服中心

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

扫描添加微信号

广州新川教育微信号

展开客服

      友情链接

  1. 学校简介
  2. 资料下载
  3. 开班信息
  4. 学员作品
  5. 学校图片
  6. 师资介绍
  7. 资料下载
  1. 工作推荐
  2. CAD培训
  3. 平面设计
  4. 室内设计
  5. 办公文秘
  6. 文秘教程
  7. 美术培训
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询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