HTML画布
canvas
canvas 元素用于在网页上绘制图形。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
// 画线
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
// 画圆
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//
</script>
官网参考：Canvas_API
canvas添加事件
svg
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
SVG 教程
canvas 与 svg区别
1.SVG 是一种使用 XML 描述 2D 图形的语言。
2.SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
3.在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
4.不适合游戏应用.
1.Canvas 通过 JavaScript 来绘制 2D 图形。
2.Canvas 是逐像素进行渲染的。不支持事件处理器。
3.在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
4.最适合图像密集型的游戏，其中的许多对象会被频繁重绘
详情参考：
canvas 与 svg区别1
canvas 与 svg区别2
HTML媒体
为了确保您的音频视频的文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。常用的解决方法由一下几种：
- embed
<embed> 标签定义外部（非 HTML）嵌入内容的容器，比如插件。
<embed height="100" width="100" src="song.mp3" >浏览器不支持该标签！</embed>
<p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p>
使用embed遇到的问题：
<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
解决方法：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
- object
<object tag> 标签也可以定义外部（非 HTML）内容的容器。
<object height="100" width="100" data="horse.mp3"></object>
<p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p>
object遇到的问题：
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
- audio 音频
<audio> 定义声音，比如音乐或其他音频流。
<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
您的浏览器不支持audio 标签.
</audio>
audio遇到的问题：
<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。
解决方法：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
- video 视频
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
您的浏览器不支持video 标签.
</video>
- 最好的 HTML 解决方法
audio，video类似的解决方法
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
HTML地理位置Geolocation
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
Geolocation是使用 getCurrentPosition() 方法来获得用户的位置。该方法第一个参数是用于处理获取到的坐标信息的函数；第二个参数用于处理获取用户位置失败时运行的函数。
<script>
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition，showError);
}else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
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;
}
}
// 获得用户的地理位置
getLocation();
</script>
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
Web Workers
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。
<!DOCTYPE html>
<html>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />
<script>
var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){ // 判断浏览器是否支持 Web Worker
if(typeof(w)=="undefined"){
// 定义执行的外部脚本文件
w=new Worker("demo_workers.js");
}
// 监听外部脚本文件执行的postMessage返回的数据信息
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}else { // 如果不支持给出提示
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker(){
w.terminate();
}
</script>
</body>
</html>
/*
* demo_workers.js
*/
var i = 0;
function timedCount() {
i = i + 1;
// 向父页面返回数据信息
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
