宁波网站建设HTML5中Canvas的应用

发布时间:2014-12-30 10:48:17

宁波网站建设HTML5中Canvas的应用

  处于随机播放状态时,我们将Math.random〇的结果乘以曲目总数并四舍五入,就可以得到一个在0与曲目总数之间的随机数值,然后将这个值传给advanceTrackO,不用担心是否超出曲目范围。举例来说,当前正在播放倒数第二曲,需要前跳五首曲子,advanceTrackO的算法将保证实际播放的会是正数第四曲。
  只有在最后一曲时才会出现“是否循环”的问题。若相关按钮被设为cm,将会通过advanceTrack(l)重新从头播放(若被设为off,则播放停止,而pbStatus.keepPlaying被设为false。其他所有情况都只是播放下一曲。
  现在我们不仅完成了音频播放器,同时也进人了关于视频及音频这一章的尾声。我们手动为视频及音频播放器设计的许多功能显然也可以直接通过浏览器实现,并且用HTML5的控制属性实现起来还会更为轻松。但是在编写JS脚本的过程中,也让我们对视频音频播放背后的机制有了更深人的了解,这仍旧是很有意义的。
  视频及音频此前一直需要依靠插件播放,宁波网站建设认为而这两个重要功能如今终于成为HTML规范的一部分。很难预测哪一种编解码器会最终流行,但因为Google的WebM带来的曙光,无需专利费的开放格式指日可待。
  HTMLMediaElement接口让我们可以通过脚本来完成视频及音频播放。此前使用相关插件也难以完成的交互,如今可以通过JavaScript来实现。
  HTML5的每个相关主题都可以在网上找到许多应用范例,花点时间去搜索和发现吧!读完本章后,相信你已经逐渐了解了HTML5吸引人的地方。
  Canvas(画布)是HTML5中最有趣及诞生最早的新元素之一。在4年6月,WHATWG成立的一个月后,来自Apple的DavidHyatt展示了一个拥有专利的HTML扩展--Canvas,这在当时尚年轻的HTML5中引起了骚动。IanHickson的第一反应是:“真正解决问题的做法是将方案公开。”短暂的争论后,Apple将此方案递交给了WHATWG,此举推动了Canvas力口入HTML5规范的进程。4年8月,第一版草案诞生了。
  简单来说,Canvas就是一张画布,可通过JavaScriptAPI在上面绘制图像。除了使用Caiwas元素外,还需要通过脚本元素来执行绘制命令。首先让我们来看一下canvas元素:
  
  alternativecontentforbrowserswithoutcanvassupport
  属性width及height决定了canvas元素的尺寸,以便在HTML页面上预留空间。若未设置则采用默认值:width为像素,height为像素。canvas开始与结束标签之间的区域为备注内容,在浏览器不支持Canvas时显示。与图片的alt标签类似,备注内容应描述Canvas应用程序内容或显示相关截图,类似于“YourbrowserdoesnotsupportCanvas”这种缺乏有价值信息的短句应尽量避免。
  定义完canvas后,在下一步中,我们可以在一个脚本元素中加入绘制命令。几行代码便足以实现我们第一个简单的Canvas案例:
  
  即便不了解任何关于Canvas绘制命令的语法,仔细读过代码后,我们还是会发现图正是那些代码的输出结果。图案包括一个红色矩形及一个黄色矩形,透明度皆为50%,两个矩形的重叠部分为橙色。
  出现的所有图表都采用Canvas在HTML页面上创建,可通过截图中的WjfflURL在线查看.或通过本书合作网站的canvas目录页浏览,多留意源代码。
  本文由乐华网络编辑,转载请注明出处
  宁波网站建设www.leseo.net
上一篇:
GoogleAnalytics网站剖析东西宁波网站优化其间Google现已主动按照URL设置地舆方位
下一篇:
Backlink(连入联接)。连到页面的联接,也有称为inlink或InBoundLink。这个Ba
关于乐华
乐华介绍
乐华思维
人才招聘
使用条款
隐私保护
RSS订阅
网站地图
新闻动态
乐华观点
行业动态
频道介绍
服务介绍
案例展示
品牌研究
品牌理论
品牌体系
联系我们
400-680-2900
社会媒体
微信公众平台
微信公众平台