HTML5：绘制圆形，使用DOM控制视频，打字配音效果，画布元素，网页可播放音频的界面等
本期概览：
HTML5-1音频视频元素.ppt
HTML5-2画布元素.ppt
HTML5-3拖放.ppt
HTML5-4地理定位.ppt
课堂例子
HTML5打字配音效果.html
创建矩形框的画布元素.html
检测是否支持地理定位
检查视频是否已暂停.html
设置元素比如图片可拖动.html
使用DOM控制视频.html
要特别注意有时js代码要写在HTML的下面，防止JS堵塞，建议CSS写HTML上面，JS都写HTML的下面
使用JS绘制图像.html
网页上的音频.html
（网页可播放音频的界面等效果）
绘制圆形.html
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
留给读者的作业
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、播放网页背景音乐
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;
}
//截取需要写到文本框中的内容
var ctx = str.substring(0,index);
document.getElementById('msg').innerHTML = ctx;
index ++;
},200);
}
</script>
</body>
</html>
注意：目前谷歌浏览器取消了自动播放音频，视频等的插件等，HTML5打字配音效果要按音量键等才可以有效果。可以选择在QQ浏览器等浏览器就可以自动播放其音频等等。
HTML5打字配音效果.html END
创建矩形框的画布元素.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>
创建矩形框的画布元素.html END
检测是否支持地理定位 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//检测是否支持地理定位
function getLocation() {
if(navigator.geolocation) {
//如果getCurrentPosition()运行成功，
//则向参数showPosition中规定的函数返回一个coordinates对象
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("你的浏览器不支持Geolocation");
}
}
function showPosition(position) {
alert("纬度:"+ position. coords. latitude +
"经度:" +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
设置元素比如图片可拖动.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>
设置元素比如图片可拖动.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");
//设置填充颜色
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度转到360度
ctx.arc(95,50,40,0,2*Math.PI);
//连成弧线
ctx.stroke();
</script>
</body>
</html>
绘制圆形.html END
网页上的音频.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>
（网页可播放音频的界面等效果）
网页上的音频.html END
留给读者的作业 START
1、使用画布画一道彩虹
2、实现使用画布写的功能
3、实现一个可以计时的时钟
4、结合H5地理定位实现百度地图的自动定位效果（打开页面，马上显示你当前所在的位置）
(答案见上期的专栏）
