实战网络营销、淘宝电商、设计培训教程中心
课程免费试听
新川教育
暑期班开班啦!学费大优惠中!仅限前20名.
教学方式任?。?.面授;2.远程在线教育;
如何使用Canvas创建动画《HTML5系列教程24》

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

福建31选7 17246期:如何使用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!谢谢大家的观看。祝大家:身体健康、生活愉快!

培训教程公众号 
扫描左图添加公众号,海量视频教程免费学.
教学任?。?.面授;2.远程教学;
7月25号网络营销远程班准时开班,提交电话,免费试听.

      友情链接

  1. 关于我们
  2. 教学优势
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 师资介绍
  7. 工作推荐
  1. 跨境电商
  2. UI设计
  3. 微信营销
  4. 办公文秘
  5. 美术培训
  6. 平面设计
  7. 联系方式
  8. site map

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

  • 临汾市脑卒中急救溶栓地图发布 2018-08-22
  • 少1人战世界杯!克罗地亚锋霸确认被开除 2018-08-22
  • 莎拉-布莱曼新专辑《追梦人》发行 打造奇妙视听盛宴 2018-08-15
  • 《中国教育报》电子版 2018-08-15
  • 人民网评:别再让“600瓶白酒”恶化政治生态 2018-08-12
  • 游戏代练在网吧里卖淫秽视频 被警方逮个正着 2018-08-12
  • 尼玛嘉措:红军走过的地方 2018-07-30
  • 有事没事扎针灸?别这样养生 2018-07-30
  • 延安时期中共领袖红色家风建设研究 2018-07-16
  • 河南宝丰:一位乡村工匠的“汝瓷梦” 2018-07-16
  • 679| 689| 482| 662| 256| 890| 878| 461| 905| 562|