注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

phperwuhan的博客

记载一个phper的历程!phperwuhan.blog.163.com

 
 
 

日志

 
 

HTML5 API简介一(Canvas,Audio/Video,Geolocation)  

2012-01-17 17:43:45|  分类: html5/css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

来源:http://www.html5china.com/course/20110926_1989.html

1.Canvas 
顾名思义,画布,你在上面画画

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.   <canvas id="canvas" style="border: 1px solid;"  width="250" height="250"> </canvas>    
  4.   <script>    
  5.     function drawTriangle(context){//画三角形    
  6.         context.beginPath();    
  7.         context.moveTo(0, 0);    
  8.         context.lineTo(30, -30);    
  9.         context.lineTo(60, 0);    
  10.         context.lineTo(0, 0);    
  11.         context.fillStyle = '#339900';    
  12.         context.fill();    
  13.         context.closePath();    
  14.     }    
  15.     function draw() {    
  16.         var canvas = document.getElementById('canvas');//获取画布    
  17.         var context = canvas.getContext('2d');//获取画笔    
  18.     
  19.         context.save();    
  20.     
  21.         context.translate(30, 60);//移动基准位置    
  22.         drawTriangle(context);//画第一个三角形    
  23.         context.stroke();    
  24.     
  25.         context.translate(60, 90);//移动基准位置    
  26.         drawTriangle(context);//画第二个三角形    
  27.         context.stroke();    
  28.     
  29.         context.restore();    
  30.     }    
  31.     window.addEventListener("load", draw, true);    
  32.   </script>    
  33. </html>    

浏览器里的样子 
 

2.Audio/Video 
无需插件,播放音频,视频,每个浏览器能支持的格式不一样,自己掂量吧 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.   <audio controls>    
  4.     <source src="johann_sebastian_bach_air.ogg">    
  5.     <source src="johann_sebastian_bach_air.mp3">    
  6.     An audio clip from Johann Sebastian Bach.    
  7.   </audio>    
  8. </html>    

Chrome中Audio的样子 
 
如何在JS中控制Audio的播放 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.   <audio id="clickSound">    
  4.     <source src="johann_sebastian_bach_air.ogg">    
  5.     <source src="johann_sebastian_bach_air.mp3">    
  6.   </audio>    
  7.     
  8.   <button id="toggle" onclick="toggleSound()">Play</button>    
  9.     
  10.   <script type="text/javascript">    
  11.     function toggleSound() {    
  12.         var music = document.getElementById("clickSound");    
  13.         var toggle = document.getElementById("toggle");    
  14.         if (music.paused) {    
  15.           music.play();    
  16.           toggle.innerHTML = "Pause";    
  17.         }    
  18.         else {    
  19.           music.pause();    
  20.           toggle.innerHTML ="Play";    
  21.         }    
  22.     }    
  23.   </script>    
  24. </html>    

Video播放和控制 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.   <video id="movies" controls onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"    
  4.     width="400px" height="300px">    
  5.     <source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>    
  6.     <source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>    
  7.   </video>    
  8. </html>    

Chrome中Video的样子 
 
3.Geolocation 
获取用户地理位置,用户可以选择是否愿意,目前来说相当的不靠谱,fanqiang后可以在Firefox测试成功,因为Firefox使用的Google的地理服务,看看代码,也比较简单 

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">    
  2.     function loadDemo() {    
  3.         if(navigator.geolocation) {//检测浏览器是否支持Geolocation    
  4.             navigator.geolocation.getCurrentPosition(updateLocation);    
  5.         }    
  6.     }    
  7.     function updateLocation(position) {    
  8.         var latitude = position.coords.latitude;    
  9.         var longitude = position.coords.longitude;    
  10.         if (!latitude || !longitude) {               
  11.             return;    
  12.         }    
  13.         document.getElementById("latitude").innerHTML = latitude;    
  14.         document.getElementById("longitude").innerHTML = longitude;    
  15.     }    
  16. </script>   
  评论这张
 
阅读(419)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017