<h2>一红省、Canvas</h2>
Canvas本質(zhì)上是一個位圖畫步理朋。
提示：
(1)Canvas的寬和高只能用屬性方式聲明龟糕！若使用樣式來聲明則無效浅蚪。
(2)Canvas的本意是“畫布/畫板”朦促，可以盛放繪制的內(nèi)容叉信；真正執(zhí)行繪圖任務(wù)的是“畫筆/繪圖上下文對象”——Context
(3)每一個畫布，有且只有一個畫筆對象：
<pre>var ctx = canvas.getContext( '2d' );</pre>
(4)畫筆/繪圖上下文對象的成員——小難點：
<pre>
- fillStyle:"#000000" 填充顏色
- font:"10px sans-serif" 字體
- globalAlpha:1 全局透明度
- lineCap:"butt" 線的端點樣式
- lineJoin:"miter" 線的連接處樣式
- lineWidth:1 線條的寬度
- shadowBlur:0 陰影部分模糊距離
- shadowColor:"rgba(0, 0, 0, 0)" 陰影部分顏色
- shadowOffsetX:0 陰影水平偏移量
- shadowOffsetY:0 陰影豎直偏移量
- strokeStyle:"#000000" 輪廓/描邊顏色
- arc:arc() 繪制一個弧線
- beginPath:beginPath() 開始繪制路徑
- clearRect:clearRect() 清除一個矩形范圍
- clip:clip() 裁切
- closePath:closePath() 閉合一條路徑
- createLinearGradient:createLinearGradient() 創(chuàng)建一個線性漸變色
- createRadialGradient:createRadialGradient() 創(chuàng)建一個徑向漸變色
- drawImage:drawImage() 繪制一幅圖像
- ellipse:ellipse() 繪制一個橢圓
- fill:fill() 填充一條路徑
- fillRect:fillRect() 填充一個矩形區(qū)域
- fillText:fillText() 填充一段文本
- lineTo:lineTo() 繪制一條直線
- measureText:measureText() 測量一段文本于樟，得到寬度
- moveTo:moveTo() 移動畫筆到指定點
- rect:rect() 繪制一個矩形路徑
- rotate:rotate() 旋轉(zhuǎn)
- scale:scale() 縮放
- stroke:stroke() 對一條路徑描邊
- strokeRect:strokeRect() 對一個矩形進行描邊
- strokeText:strokeText() 對一段文本進行描邊
-
translate:translate() 進行位移
</pre>
QQ截圖20170328092438.png
(1)繪制矩形(長方形)——矩形以自己的左上角作定位點
(2)繪制文本——文字以自己的坐下角作定位點
html結(jié)構(gòu)：
<pre>
<canvas id="diagonal" style="1px solid" width:"200" height:"200"></canvas>
</pre>
JavaScript代碼：
<pre>
function drawDiagonal(){
//取的canvas元素及其繪圖上下文
var canvas=document.getElementById("diagonal");
var context=canvas.getContext('2d');
//用絕對坐標來創(chuàng)建一條路徑
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//將這條線繪制到canvas上
context.stroke();
}
window.addEventListener('load',drawDiagonal(),true);
</pre>
練習(xí)：繪制一個左右來回移動的矩形
經(jīng)典的碰撞反彈效果
<pre>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5新特性——Canvas繪圖技術(shù)</title>
<style>
canvas {
background: #efefef;
}
</style>
</head>
<body>
<canvas id="c1" width="500" height="400">
您的瀏覽器不支持Canvas標簽公条！
</canvas>
<script>
//在畫布上繪圖需要使用畫筆(繪圖上下文)
var ctx = c1.getContext('2d'); //二維繪圖對象
//練習(xí)：繪制一個左右來回移動的矩形
//經(jīng)典的碰撞反彈效果
var x = 0;
var y = 0;
var xDirection = 1; //1表正向 -1表負向
setInterval(function(){
//清除已有內(nèi)容
ctx.clearRect(0,0, 500,400);
ctx.fillRect(x,y, 50,40);
x += 5*xDirection;
if(x>=500-50){
xDirection = -1;
}else if(x<=0){
xDirection = 1;
}
}, 42);
</script>
</body>
</html>
</pre>
對于web API可以不用記住：可以查詢Mozilla開發(fā)者網(wǎng)絡(luò)API：https://developer.mozilla.org/
<h5>①第一步：Web API & DOM</h5>
<h5>②第二步：Web API接口一覽表</h5>
<h5>③第三步：找到Canvas API</h5>
<h5>④第四步：繪制矩形迂曲、文本靶橱，線型、文本樣式路捧、填充和描邊樣式关霸、漸變和圖案、圖像等</h5>
<h2>二杰扫、Audio和Video</h2>
HTML5中的多媒體支持<video></video>队寇、<audio></audio>
<pre>
<audio id="clickSound">
<source src="a.ogg">
<source src="b.mp3">
</audio>
<button id="toggle" onclick="toggleSound()">play</button>
</pre>
<pre>function toggleSound() {
var music = document.getElementById('clickSound');
var toggle = document.getElementById('toggle');
if(music.paused){
music.play();
toggle.innerHTML = 'Pause';
}else{
music.pause();
toggle.innerHTML = 'Play';
}
}</pre>
<video>標簽可用的屬性：
(1) src：待播放的資源的URL
(2) width：播放區(qū)域的寬度
(3) height：播放區(qū)域的高度
(4) controls：是否顯示播放控件，默認不顯示 false
(5) autoplay：是否自動播放章姓，默認不自動播放 false
(6) loop：是否循環(huán)播放段只，默認不循環(huán) false
(7) preload：如何預(yù)加載視頻姥份，可以賦值為
“none”：不預(yù)加載
“metadata”：只預(yù)加載元數(shù)據(jù)浸剩，如影片寬擦盾、高、大小系忙、時長
“auto”：（默認值）自動預(yù)加載元數(shù)據(jù)以及部分影片數(shù)據(jù)
(8) poster：影片播放之前顯示的“電影海報”
<pre>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>演示：video對象成員的使用</title>
<style>
.container {
text-align: center;
position: relative;
border: 1px solid #aaa;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0, .5);
}
.mask img {
margin-top: 200px;
cursor: pointer;
border: 1px solid #aaa;
border-radius: 50%;
background: rgba(255,255,255,0.2);
}
</style>
</head>
<body>
<div class="container">
<video id="player" src="resource/birds.mp4" >
您的瀏覽器不支持VIDEO標簽
</video>
</div>
</pre>
<pre>
<script>
//當點擊“播放|暫退信危”按鈕時，開始播放/暫停影片
playOrPause.onclick = function(){
if(player.paused === true){ //當前處于暫停狀態(tài)
player.play(); //播放影片
playOrPause.src = 'resource/pause.png';
}else { //當前處于播放狀態(tài)
player.pause();
playOrPause.src = 'resource/play.png';
}
}
//當影片暫停時笨觅，遮罩層中顯示一個廣告
player.onpause = function(){
ad.style.display = 'inline-block';
}
//當影片播放時拦耐，去除遮罩層中的廣告
player.onplay = function(){
ad.style.display = 'none';
}
</script>
</pre>
<h2>三耕腾、Geolocation</h2>
HTML5 Geolocation API 用于獲得用戶的地理位置见剩。
鑒于該特性可能侵犯用戶的隱私，除非用戶同意扫俺，否則用戶位置信息是不可用的苍苞。
瀏覽器獲得地理定位數(shù)據(jù)的原理：
手機： GPS、基站、IP反向解析
PC： IP反向解析
①使用 getCurrentPosition() 方法來獲得用戶的位置羹呵。
簡單的地理定位實例骂际，可返回用戶位置的經(jīng)度和緯度。
<pre>
<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊這個按鈕冈欢，獲得您的坐標：</p>
<button onclick="getLocation()">試一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
</pre>
例子解釋：
檢測是否支持地理定位
如果支持歉铝，則運行 getCurrentPosition() 方法。如果不支持凑耻，則向用戶顯示一段消息太示。
如果getCurrentPosition()運行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象
showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度
上面的例子是一個非诚愫疲基礎(chǔ)的地理定位腳本类缤，不含錯誤處理。
②處理錯誤和拒絕
getCurrentPosition() 方法的第二個參數(shù)用于處理錯誤邻吭。它規(guī)定當獲取用戶位置失敗時運行的函數(shù)：
<pre>
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</pre>
錯誤代碼：
Permission denied - 用戶不允許地理定位
Position unavailable - 無法獲取當前位置
Timeout - 操作超時
<h6>getCurrentPosition() 方法 - 返回數(shù)據(jù)</h6>
若成功餐弱，則 getCurrentPosition() 方法返回對象。始終會返回 latitude囱晴、longitude 以及 accuracy 屬性膏蚓。如果可用，則會返回其他下面的屬性畸写。
Geolocation 對象 - 其他有趣的方法
watchPosition() - 返回用戶的當前位置降允，并繼續(xù)返回用戶移動時的更新位置（就像汽車上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法艺糜。您需要一臺精確的 GPS 設(shè)備來測試該例（比如 iPhone）：
實例
<pre>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script></pre>
<h6>百度地圖</h6>
官網(wǎng)：http://lbsyun.baidu.com/
使用步驟：
(1)注冊新用戶剧董，或者使用QQ、微博破停、微信賬號登陸
https://passport.baidu.com/v2/?reg®Type=1&tpl=mn&u=http://lbsyun.baidu.com/
(2)登錄
https://passport.baidu.com/v2/?login&fr=old&login&u=http://lbsyun.baidu.com/
(3)查看開發(fā)者手冊
http://lbsyun.baidu.com/index.php?title=jspopular
(4)每個使用百度地圖API的應(yīng)用必須申請一個唯一的AccessKey(AK)
http://lbsyun.baidu.com/apiconsole/key
(5)調(diào)用百度地圖API
1)在地圖上以某點為中心進行顯示
2)添加地圖控件
3)在地圖上標記某點
DEMO地址： http://developer.baidu.com/map/jsdemo.htm#a1_2
