HTML5：繪制圓形，使用DOM控制視頻，打字配音效果，畫布元素，網(wǎng)頁可播放音頻的界面等
本期概覽：
HTML5-1音頻視頻元素.ppt
HTML5-2畫布元素.ppt
HTML5-3拖放.ppt?
HTML5-4地理定位.ppt?
課堂例子
HTML5打字配音效果.html?
創(chuàng)建矩形框的畫布元素.html
檢測是否支持地理定位
檢查視頻是否已暫停.html
設(shè)置元素比如圖片可拖動.html
使用DOM控制視頻.html
要特別注意有時js代碼要寫在HTML的下面，防止JS堵塞，建議CSS寫HTML上面，JS都寫HTML的下面
使用JS繪制圖像.html
網(wǎng)頁上的音頻.html
（網(wǎng)頁可播放音頻的界面等效果）
繪制圓形.html
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
留給讀者的作業(yè)
HTML5-1音頻視頻元素.ppt START
HTML5-1音頻視頻元素.ppt END
HTML5-2畫布元素.ppt START
HTML5-2畫布元素.ppt END
HTML5-3拖放.ppt START
HTML5-3拖放.ppt END
HTML5-4地理定位.ppt START
HTML5-4地理定位.ppt END
課堂例子 START
1、播放一個視頻文件
2、播放網(wǎng)頁背景音樂
3、打字效果配音
4、畫布中畫一個矩形，一個圓和一條斜線
5、拖放效果
6、地圖定位效果
課堂例子 END
HTML5打字配音效果.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="msg" cols="20" rows="5"></textarea>
<audio id="ao" width="0" height="0">
抱歉，你的瀏覽器不支持audio標簽
<source srcc="MP3/type.mp3" type="audio/mp3" ></source>
</audio>
<script>
window.onload = function(){?
//獲取音頻標簽
var ao = document.getElementById('ao');
var str = '真的學渣 | 敢于面對慘淡的成績 | 敢于正視老師的雙眸...';
var index = 0;
window.setInterval(function(){
//配音
ao.play();
if(index == str.length) {
index = 0;
}
//截取需要寫到文本框中的內(nèi)容
var ctx = str.substring(0,index);
document.getElementById('msg').innerHTML = ctx;
index ++;
},200);
}
</script>
</body>
</html>
注意：目前谷歌瀏覽器取消了自動播放音頻，視頻等的插件等，HTML5打字配音效果要按音量鍵等才可以有效果。可以選擇在QQ瀏覽器等瀏覽器就可以自動播放其音頻等等。
HTML5打字配音效果.html END
創(chuàng)建矩形框的畫布元素.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000; ">
<!--您的瀏覽器不支持HTML5 canvas
標簽?！救绻蛔⑨寱]太多影響的報錯】-->
</canvas>
</body>
</html>
創(chuàng)建矩形框的畫布元素.html END
檢測是否支持地理定位 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//檢測是否支持地理定位
function getLocation() {
if(navigator.geolocation) {
//如果getCurrentPosition()運行成功，
//則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("你的瀏覽器不支持Geolocation");
}
}
function showPosition(position) {
alert("緯度:"+ position. coords. latitude +
"經(jīng)度:" +position.coords.longitude);}
getLocation();
</script>
</head>
<body>
</body>
</html>
檢測是否支持地理定位 END
檢查視頻是否已暫停.html START
<!DOCTYPE html>?
<html>?
<meta charset="UTF-8">
<body>?
<button onclick="isVidPaused()" type="button">該視頻是否已暫停</button>
<br />
<br />
<video id="video1" controls="controls">
? <source srcc="video/a.mp4" type="video/mp4">
? <source srcc="video/a.mp4" type="video/ogg">
? Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function isVidPaused()
? {?
? alert(myVid);
? alert(myVid.paused);
? }?
</script>?
</body>
</html>
檢查視頻是否已暫停.html END
設(shè)置元素比如圖片可拖動.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="img" srcc= "img/碧風羽 BOOTH店オープン568678.jpg"
draggable="true"? width="109" height="64" />
</body>
</html>
設(shè)置元素比如圖片可拖動.html END
使用DOM控制視頻.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="text-align: center">
<button onclick="playPause();">播放/暫停</button>
<button onclick="resize(560);">放大</button>
<button onclick="resize(320);">縮小</button>
<button onclick="resize(420);"> 普通</button>
<br>
<video? id="video1"? width="420px"? controls="controls">
<source srcc="video/a.mp4" type="video/mp4">
<source srcc="video/a.mp4" type="video/ogg">
<!--您的瀏覽器不支持HTML5 video標簽。-->
</video>
</div>
<!--要特別注意有時js代碼要寫在HTML的下面，防止JS堵塞，建議CSS寫HTML上面，JS都寫HTML的下面-->
<script>
myVid=document.getElementById("video1");
function playPause(){
alert(myVid);
if (myVid.paused) {
myVid.play();
}?
else {
myVid.pause();
}
}
function resize(w){
// alert(1);
myVid.width = w;
}
</script>
</body>
</html>
使用DOM控制視頻.html END
使用JS繪制圖像.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" >
<!--您的瀏覽器不支持HTML5 canvas
標簽?！救绻蛔⑨寱]太多影響的報錯】
?style="border:1px solid #000000; "-->
</canvas>
</body>
<script>
//獲取畫布元素
var cv= document.getElementById("myCanvas");
//獲取可繪制的面板
var ctx = cv.getContext("2d");
//設(shè)置填充顏色
ctx.fillStyle ="#FF0000";
//繪制一個矩形，左頂點坐標是(0,0)
//矩形寬150px， 高75px
ctx.fillRect(0,0,150,75);
</script>
</html>
使用JS繪制圖像.html END
繪制圓形.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" >
<!--style="border:1px solid #d3d3d3;"-->
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
//開始畫圓
var ctx=c.getContext("2d");
ctx.beginPath();
//圓形坐標(95, 50),半徑40px
//從0度轉(zhuǎn)到360度
ctx.arc(95,50,40,0,2*Math.PI);
//連成弧線
ctx.stroke();
</script>
</body>
</html>
繪制圓形.html END
網(wǎng)頁上的音頻.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio controls height="100" width= "100">
<source srcc="MP3/type.mp3" type= "audio/mpeg">
<embed height="50px" width="100px" srcc= "type.mp3">
</audio>
</body>
</html>
（網(wǎng)頁可播放音頻的界面等效果）
網(wǎng)頁上的音頻.html END
留給讀者的作業(yè) START
1、使用畫布畫一道彩虹
2、實現(xiàn)使用畫布寫的功能
3、實現(xiàn)一個可以計時的時鐘
4、結(jié)合H5地理定位實現(xiàn)百度地圖的自動定位效果（打開頁面，馬上顯示你當前所在的位置）
(答案見上期的專欄）
