网上教学
网络营销培训专家新川教育
   著名实战网络营销课程培训机构.
网络营销,淘宝培训课程优惠
如何使用Canvas创建动画《HTML5系列教程24》

来源:新川教育 阅读数:4329
添加时间:2017-5-13   类别:网页设计教程

福建体彩31选7开奖.:如何使用Canvas创建动画《HTML5系列教程24》

福建31选7开奖时间 www.tzh2.cn     动画是由一帧一帧的图像组合而成的,这些相信学过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. SEM培训
  4. UI设计
  5. PS图片处理
  6. 营销就业班
  7. 跨境电商
  8. 微信营销
  1. 开班信息
  2. 教学优势
  3. 师资介绍
  4. 资料下载
  5. 工作推荐
  6. 学员作品
  7. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
咨询微信:18926224142     微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

福建31选7开奖时间
  • 跪着接生!医生以最庄重的姿势“抢回”女婴 2019-05-19
  • 端午粽“香”让文化情“浓” 2019-05-16
  • 明确方向创新思路 浙商迸发基层党建新活力 2019-05-16
  • “只想当官,不想做事”是当前官场存在的大问题。[上火][上火] 2019-05-13
  • 广州女主播深夜直播卸妆遇停水 快递小哥28分钟送上门 2019-05-13
  • 法国vs澳大利亚:格列兹曼、博格巴、登贝莱首发 2019-05-10
  • 图解:盘点城市“抢人大战”,给毕业生的福利哪家强? 2019-05-10
  • 我国今年端午节交通事故起数、死亡人数下降 2019-05-05
  • 《辉煌中国》第一集《圆梦工程》 2019-05-05
  • 新粤牵手心连心喀什绽放木棉花 2019-04-29
  • 好的哥找行李失主,行李失主找“记者帮” 2019-04-27
  • 用生命诠释师魂——河南教师李芳--河南频道--人民网 2019-04-23
  • 青藏线上的绿色守护者 2019-04-23
  • 三晋史话:班婕妤与《团扇歌》 2019-04-19
  • 隔代育儿,“晚年”该如何呵护童年(微议录) 2019-04-19
  • 229| 990| 763| 988| 798| 484| 164| 841| 502| 259|