网上教学
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
如何使用Canvas创建动画《HTML5系列教程24》

来源:新川教育 阅读数:3318
添加时间: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. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 联系方式
  7. site map

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

粤公网安备 44011302001949号
  • 在战火中诞生的党中央机关报(连载六) 2019-03-15
  • 上海浦东:高行同心圆 打造“指尖上的党建阵地” 2019-03-11
  • 郭树清:收益率超6%要打问号 让庞氏骗局无所遁形 2019-03-11
  • 有理讲理,不要诬蔑。 2018-12-03
  • 浙大科研团队15载攻克歼20等飞机装配系列难题 2018-12-03
  • “民主”韩非子叫“亲下以谋上”投机,中国是义主《国语》“立义治律万物皆作,分均天才万物熙熙。” 2018-12-03
  • 临汾市脑卒中急救溶栓地图发布 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
  • 162| 731| 448| 963| 146| 698| 311| 111| 726| 567|