HTML5入门

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

字号+ 作者： 来源： 2014-11-16 20:49 我要评论( )

1.Canvas 顾名思义，画布，你在上面画画 XML/HTML Code 复制内容到剪贴板 !DOCTYPEhtml html canvas id = canvas style = border:1pxsolid; width = 250 height = 250 / canvas script functiondrawTriangle(context){//画三角形 c

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>    

 

 

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5常用标签总结

    HTML5常用标签总结

    2016-03-23 14:02

  • html5学得好不好，看掌握多少标签

    html5学得好不好，看掌握多少标签

    2015-09-28 12:53

  • 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    2015-06-02 14:32

  • 小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

    小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

    2015-06-02 14:34

网友点评
精彩导读
小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（11）——链接，图片，表格，框架

小强的HTML5移动开发之路（11）——链接，图

小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几

小强的HTML5移动开发之路（40）——jqMobi中

小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

小强的HTML5移动开发之路（35）——jQuery中

小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似

小强的HTML5移动开发之路（41）——jqMobi中S

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案：鲁ICP备17035125号-2
HTML5入门 HTML5技术 canvas教程 专题学习 齐博CMS教程