DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5 API簡介一(Canvas,Audio/Video,Geolocation)
HTML5 API簡介一(Canvas,Audio/Video,Geolocation)
編輯：HTML5詳解     

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>    
HTML5詳解
Html5.0參考手冊
W3C 在 2008年 1 月 22 日發布了最新的 HTML 5 工作草案。HTML 5 工作組
實例教程 HTML5 Canvas 超炫酷煙花綻放動畫實現代碼
這是一個很酷的HTML5 Canvas動畫，它將模擬的是我們現實生活中煙花綻放的動畫特效，效果非常
HTML5移動應用開發第3章：移動Web離線應用
先決條件在本文中，您將使用最新 Web 技術開發 Web 應用程序。這裡的大多數代碼只是 Html

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html5 迷宮游戲(碰撞檢測)實例一 利用html5 canvas破解簡單驗證碼及getImageData接口應用 CSS3可按進度變色的進度條 JS+DIV+CSS實現的經典標簽切換效果代碼 HTML5實現錨點時請使用id取代name Html5多媒體相關的API－－-video HTML 簡史 用HTML5制作一個簡單的彈力球游戲 通過手機Web實現手機搖一搖的功能 HTML5技術教程：發布內容
熱門推薦
淺析HTML5的WebSocket與服務器推送事件 用canvas 實現個圖片三角化（LOW POLY）效果 html5 postMessage解決跨域、跨窗口消息傳遞 HTML5漫談（4）--HTML5應用平台:PhoneGAP html5中valid、invalid、required的定義 HTML5 語音搜索只需一句代碼 10個學習HTML5的好教程 HTML5的初級技巧 之第三課 分享全球十款超強HTML5開發工具
大家都在看
如何使用jquery控制CSS樣式,並且取消Css樣式 DIV+CSS布局：兩列固定寬度 網頁從彈窗頁面單選框傳值至父頁面代碼分享 ID類和class類的長命名與短命名 AJAX機制詳解以及跨域通信 Js+Flash實現訪問剪切板操作 Bootstrap每天必學之工具提示（Tooltip）插件 會動的頁面導航菜單(放在主頁增加動感)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved