第十一章HTML5开发实战
目录
1、HTML5视频video
1.1video标签概述
1.2在网页中添加视频文件
当前，video元素支持3种视频格式。
- OGG：带有Theora视频编码和Vorbis音频编码的OGC文件。
- MP4：带有H.264视频编码和AAC音频编码的MP4文件。
- WEBM：带有VP8视频编码和Vorbis音频编码的WEBM文件。
1.3链接不同的视频文件
2、HTML5音频Audio
2.1Audio元素简介
2.2隐藏audio播放器
2.3使用audio元素的事件
3、HTML5地理定位
3.1地理定位方法
1.通过IP地址来定位
2.全球定位系统GPS
3.蜂窝电话基站的位置定位
3.2在地图上显示你的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map</title>
</head>
<body>
<p id="demo">点击按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<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>
</body>
</html>4、HTML5画布canvas
4.1canvas元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 10px;
padding: 10px;
background: #9c0;
border: thin inset #aaaaaa;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="400">
Canvas not supported
</canvas>
<script src="example.js"></script>
</body>
</html>4.2基本的绘制操作
4.3线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变t</title>
<style>
body {
background-color: #eeeeee;
}
#outer {
margin-left: 40px;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="outer">
<canvas id="canvas1" width="400" height="400">
Your Browser doesn't support the canvas ! Try anther browser.
</canvas>
</div>
<div>
<script>
var mycanvas = document.getElementById("canvas1");
var cntx = mycanvas.getContext('2d');
var mygradient = cntx.createLinearGradient(30, 30, 300, 300);
mygradient.addColorStop("0", "#CC3");
mygradient.addColorStop(".40", "#FF0");
mygradient.addColorStop(".57", "#390");
mygradient.addColorStop(".82", "#90C");
mygradient.addColorStop("1.0", "#9FF");
cntx.fillStyle = mygradient;
cntx.fillRect(0, 0, 400, 400);
</script>
</div>
</body>
</html>
4.4径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>径向渐变</title>
<style>
body {
background-color: #eeeeee;
}
#outer {
margin-left: 40px;
}
</style>
</head>
<body>
<div id="outer">
<canvas id="canvas1" width="400" height="400">
Your browser doesn't support the canvas ! Try another browser.
</canvas>
</div>
<script>
var mycanvas = document.getElementById("canvas1");
var cntx = mycanvas.getContext('2d');
var mygradient = cntx.createRadialGradient(200, 200, 10, 300, 300, 300);
mygradient.addColorStop("0", "#CC3");
mygradient.addColorStop(".25", "#FF0");
mygradient.addColorStop(".50", "#390");
mygradient.addColorStop(".75", "#90C");
mygradient.addColorStop("1.0", "#9FF");
cntx.fillStyle = mygradient;
cntx.fillRect(0, 0, 400, 400);
</script>
</body>
</html>
4.5绘制精美时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clock</title>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body onload="run()">
<canvas id="canvas" width="400" height="400" style="border:1px #ccc solid;">
如果你看到这段文字，说明你的浏览器弱爆了！
</canvas>
<script>
window.onload = draw;
function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.save();
context.translate(200, 200);
var deg = 2 * Math.PI / 12;
context.save();
context.beginPath();
for (var i = 1; i < 13; i++) {
var x = Math.sin(i * deg);
var y = -Math.cos(i * deg);
context.lineTo(x * 150, y * 150);
}
var c = context.createRadialGradient(0, 0, 0, 0, 0, 130);
c.addColorStop(0, "#360");
c.addColorStop(1, "#6C0");
context.fillStyle = c;
context.fill();
context.closePath();
context.restore();
context.save();
context.beginPath();
for (var i = 1; i < 13; i++) {
var x1 = Math.sin(i * deg);
var y1 = -Math.cos(i * deg);
context.fillStyle = "#fff";
context.font = "bold 20px Calibri";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText(i, x1 * 120, y1 * 120);
}
context.closePath();
context.restore();
context.save();
context.beginPath();
for (var i = 0; i < 12; i++) {
var x2 = Math.sin(i * deg);
var y2 = -Math.cos(i * deg);
context.moveTo(x2 * 148, y2 * 148);
context.lineTo(x2 * 135, y2 * 135);
}
context.strokeStyle = "#fff";
context.lineWidth = 4;
context.stroke();
context.closePath();
context.restore();
context.save();
var deg1 = 2 * Math.PI / 60;
context.beginPath();
for (var i = 0; i < 60; i++) {
var x2 = Math.sin(i * deg1);
var y2 = -Math.cos(i * deg1);
context.moveTo(x2 * 146, y2 * 146);
context.lineTo(x2 * 140, y2 * 140);
}
context.strokeStyle = '#fff';
context.lineWidth = 2;
context.stroke();
context.closePath();
context.restore();
context.save();
context.strokeStyle = "#fff";
context.font = '34px sans-serif';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.strokeText('canvas', 0, 65);
context.restore();
var time = new Date();
var h = (time.getHours() % 12) * 2 * Math.PI / 12;
var m = time.getMinutes() * 2 * Math.PI / 60;
var s = time.getSeconds() * Math.PI / 60;
context.save();
context.rotate(h + m / 12 + s / 720);
context.beginPath();
context.moveTo(0, 6);
context.lineTo(0, -85);
context.strokeStyle = "#fff";
context.lineWidth = 6;
context.stroke();
context.closePath();
context.restore();
context.save();
context.rotate(m + s / 60);
context.beginPath();
context.moveTo(0, 8);
context.lineTo(0, -150);
context.strokeStyle = "#fff";
context.lineWidth = 4;
context.stroke();
context.closePath();
context.restore();
context.save();
context.rotate(s);
context.beginPath();
context.moveTo(0, 10);
context.lineTo(0, -120);
context.strokeStyle = "#fff";
context.lineWidth = 2;
context.stroke();
context.closePath();
context.restore();
context.restore();
setTimeout(draw, 1000);
}
</script>
</body>
</html>
5、HTML5 SVG
5.1SVG概述
与其他图像格式相比（比如JPEG和GIF），使用SVG的优势如下。
- SVG图像可通过文本编辑器来创建和修改。
- SVG图像可被搜索、索引、脚本化或压缩。
- SVG是可缩放的。
- SVG图像可在任何的分辨率下以高质量打印输出。
- SVG可在图像质量不下降得情况下被放大显示。
5.2图形绘制
1.矩形<rect>
2.椭圆<ellipse>
3.线条<line>
4.折线<polyline>
5.多边形<pilygon>
5.3文本与图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg height="200">
<rect width="300" height="200" fill="red"/>
<circle cx="150" cy="100" r="80" fill="blue"/>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">文本图像</text>
</svg>
</body>
</html>
5.4笔画与填充
5.5动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1">
<desc>基本动画元素</desc>
<rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2"></rect>
<!-- 矩形位置和大小的动画 -->
<rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255,255,0)">
<animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze"
from="300" to="0"></animate>
<animate attributeName="y" attributType="XML" begin="0s" dur="9s" fill="freeze"
from="100" to="0"></animate>
<animate attributeName="width" attributrType="XML" begin="0s" dur="9s" fill="freeze"
from="300" to="800"></animate>
<animate attributeName="height" attributrType="XML" begin="02" dur="9s" fill="freeze"
from="100" to="300"></animate>
</rect>
<g transform="tanslate(100,100)">
<text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden">
动画播放
<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze"></set>
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze"></animateMotion>
<animate attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0"
begin="3s" dur="6s" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
additive="sum" begin="3s" dur="6s" fill="freeze"></animateTransform>
</text>
</g>
</svg>
</body>
</html>
2351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
