HTML5知识点总结

canvas

canvas宽高设置

canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
在css中定义的canvas宽和高只是其在html中的显示宽高，不是canvas的真实分辨率，canvas的真是分辨率需要通过其width和height属性来设置。

save和restore方法

save()方法调用后,将所有设置都会进入一个栈结构，得以妥善保管。然后可以对上下文进行其他修改
栈结构–>后进先出
想要返回之前保存的设置，可以调用restore()方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。
连续调用save()方法可以将更多设置保存在栈结构中，之后再连续调用restore()方法则可以一级一级返回

当前浏览器不支持canvas <script type="text/javascript"> var drawing = document.getElementById("drawing"); //确保浏览器支持canvas元素 if (drawing.getContext){ var context = drawing.getContext("2d"); context.fillStyle = "#ff0000";//红色 context.save();//调用save()方法保存上下文状态 context.fillStyle = "#00ff00";//绿色 context.translate(100, 100);//把坐标原点变换到(100, 100) context.save();//调用save()方法保存上下文状态 context.fillStyle = "#0000ff";//蓝色 context.fillRect(0, 0, 100, 200); //因为此时的坐标原点已经变为(100, 100)，所以从(100, 100)点开始绘制蓝色矩形 context.restore();//调用restore()，fillStyle变为绿色，因为坐标位置的变换仍然起作用，所以矩形的起点坐标是(110, 110) context.fillRect(10, 10, 100, 200); //从 (110, 110)点开始绘制绿色矩形 context.restore();//再一次调用restore()，fillStyle变为红色，坐标位置的变换不起作用了，所以矩形的起点坐标是(0, 0) context.fillRect(0, 0, 100, 200); //从(0,0)点开始绘制红色矩形 //特别注意，save()方法保存的是对绘图上下文的设置和变换，不会保存绘图上下文的内容 } </script>

toDataURL方法

toDataURL()方法可以导出在canvas元素上绘制的图像，该方法接收一个参数：图像的格式类型

当浏览器不支持canvas元素

点击导出图片，即可以将图像变成图片元素，右键点击图片元素即可以将它保存到本地

<script type="text/javascript"> var drawing = document.getElementById("drawing"), btn= document.getElementById("export-btn"); //确保浏览器支持canvas元素 if (drawing.getContext){ var context = drawing.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50); //绘制半透明的蓝色矩形 context.fillStyle = "rgba(0,0,255,0.5)"; context.fillRect(30, 30, 50, 50); } btn.onclick = function() { //取得图像数据的URI //var imgURI = drawing.toDataURL(); //这里没有指定图像的类型格式，默认是png格式的图像 var imgURI = drawing.toDataURL("image/png"); //显示图像 var image = document.createElement("img"); image.src = imgURI; document.body.appendChild(image); }; </script>

Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置

地理位置对象navigator.geolocation

getCurrentPosition() 方法

可以使用 getCurrentPosition() 方法来获得用户的位置，该方法接收3个参数：请求成功函数、请求失败函数和数据收集方式
请求成功函数：

经度 : coords.longitude 纬度 : coords.latitude 位置准确度 : coords.accuracy 海拔 : coords.altitude 海拔准确度 : coords.altitudeAcuracy 行进方向 : coords.heading 从正北开始以度计地面速度 : coords.speed 以米/每秒计时间戳 : new Date(position.timestamp) 响应的日期/时间
请求失败函数：
失败编号：code 0(Unknown_error) : 不包括其他错误编号中的错误 1( Permission denied) : 用户拒绝浏览器获取位置信息 2(Position unavailable) : 尝试获取用户信息，但失败了

3(Timeout ) : 设置了timeout值，获取位置超时了

数据收集方式：json的形式

enableHighAcuracy : 更精确的查找，默认false timeout : 获取位置允许最长时间，默认infinity maximumAge : 位置可以缓存的最大时间，默认0

Demo1:

 

<script type="text/javascript"> var x=document.getElementById("demo"); function getLocation(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{ x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "
经度: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: // alert(error.code); 1 x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: // alert(error.code); 2 x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: // alert(error.code); 3 x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: // alert(error.code); 0 x.innerHTML="未知错误。" break; } } </script>

Demo2:


<script type="text/javascript"> var oBtn = document.getElementById('btn'); var oTxt = document.getElementById('t1'); oBtn.onclick = function(){ navigator.geolocation.getCurrentPosition(function(position){ oTxt.value += '经度:' + position.coords.longitude+'\n'; oTxt.value += '纬度 :' + position.coords.latitude+'\n'; oTxt.value += '准确度 :' + position.coords.accuracy+'\n'; oTxt.value += '海拔 :' + position.coords.altitude+'\n'; oTxt.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n'; oTxt.value += '行进方向 :' + position.coords.heading+'\n'; oTxt.value += '地面速度 :' + position.coords.speed+'\n'; oTxt.value += '时间戳:' + new Date(position.timestamp)+'\n'; },function(err){ //err.code--失败所对应的编号 alert( err.code ); },{ enableHighAcuracy : true, timeout : 5000, maximumAge : 5000//设置缓存过期时间，提高性能 }); }; </script>

watchPosition() 方法

watchPosition() - 多次定位请求(像setInterval) ,返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。移动设备有用，位置改变才会触发
配置参数：frequency 表示更新的频率
clearWatch() - 停止 watchPosition() 方法(像clearInterval)
Demo:


<script type="text/javascript"> var oBtn = document.getElementById('btn'); var oTxt = document.getElementById('t1'); var timer = null; oBtn.onclick = function(){ //多次请求 timer = navigator.geolocation.getCurrentPosition(function(position){ oTxt.value += '经度:' + position.coords.longitude+'\n'; oTxt.value += '纬度 :' + position.coords.latitude+'\n'; oTxt.value += '准确度 :' + position.coords.accuracy+'\n'; oTxt.value += '海拔 :' + position.coords.altitude+'\n'; oTxt.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n'; oTxt.value += '行进方向 :' + position.coords.heading+'\n'; oTxt.value += '地面速度 :' + position.coords.speed+'\n'; oTxt.value += '时间戳:' + new Date(position.timestamp)+'\n'; },function(err){ //err.code--失败所对应的编号 alert( err.code ); navigator.geolocation.clearWatch(timer);//关闭更新请求 },{ enableHighAcuracy : true, timeout : 5000, maximumAge : 5000,//设置缓存过期时间，提高性能 frequency : 1000 }); }; </script>

应用Demo:

 

<script src="https://api.map.baidu.com/api?v=1.4"></script><script type="text/javascript"> var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ navigator.geolocation.getCurrentPosition(function(position){ //获取经度和纬度 var y = position.coords.longitude; var x = position.coords.latitude; // 百度地图API功能 var map = new BMap.Map("box"); // 初始化地图,设置中心点坐标和地图级别 var pt = new BMap.Point(y, x); map.centerAndZoom(pt, 14); map.enableScrollWheelZoom();//开启鼠标滚轮缩放 //创建图片 var myIcon = new BMap.Icon("dut.jpg", new BMap.Size(200,200)); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注 map.addOverlay(marker2);// 将标注添加到地图中 //创建信息窗口 var opts = { width : 200, // 信息窗口宽度 height: 60, // 信息窗口高度 title : "大连理工大学"// 信息窗口标题 } var infoWindow = new BMap.InfoWindow("高等学府", opts);//创建信息窗口对象 map.openInfoWindow(infoWindow,pt); //开启信息窗口 }); }; </script>

Web Workers

javaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。
Web Worker的目的:就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。可以让web应用程序具备后台处理能力，对多线程的支持非常好。

Web Worker API

new Worker(‘后台处理的JS地址’)
使用Web Worker：
实例化Worker对象并传入要执行的Javascript文件名就可以创建一个新的Web Worker。
例如：var worker = new Worker(“worker.js”);
这行代码会导致浏览器下载worker.js，但只有Worker接收到消息才会实际执行文件中的代码。 利用postMessage传输数据
要给Worker传递消息，可以使用postMessage()方法。
Worker是通过message和error事件与页面通信的。来自Worker的数据保存在event.data中。Worker返回的数据也可以是任何能够被序列化的值。
Worker不能完成给定的任务时就会触发error事件。具体来说，Worker内部的JavaScript在执行过程中只要遇到错误，就会触发error事件。发生error事件时，事件对象中包含3个属性：****filename、lineto和message，分别表示发生错误的文件名、代码行号和完整的错误信息 terminate() 方法:终止 web worker，并释放浏览器/计算机资源(这个方法是在页面中调用的) importScripts(‘导入其他JS文件’)

Worker全局作用域

关于Web Worker，最重要的是：要知道它所执行的JavaScript代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在Web Worker中，同样有一个全局对象和其他对象以及方法。但是，Web Worker中的代码不能访问DOM，也无法通过任何方式影响页面的外观。
Web Worker中的全局对象是worker对象本身。也就是说，在这个特殊的全局作用域中，this和self引用的都是worker对象。
为了便于处理数据，Web Worker本身也是一个最小化的运行环境：

最小化的navgator对象 : online、appName、appVersion、userAgent、platform 只读的location对象 : 所有属性都是只读的 self : 指向全局 worker 对象 所有的ECMA对象，Object、Array、Date等 XMLHttpRequest构造器 setTimeout和setInterval方法 close()方法，立刻停止worker运行(在worker内部使用，而terminate() 方法是在页面中调用的) importScripts方法
在Worker的全局作用域中，我们可以调用importScripts方法来接收一个或者多个JavaScript文件的URL。每个加载过程都是异步进行的，因此所有脚本加载并执行之后，importScripts()才会执行。
例如：
importScripts(‘file1.js’,’file2.js’);
即使file2.js先于file1.js下载完，执行的时候仍然会按照先后顺序执行。这些脚本都是在Worker的全局作用域中执行的。Worker中的脚本一般都具有特殊的用途，不会像页面中的脚本那么功能宽泛。

Web Worker的运行环境与页面环境相比，功能是相当有限的。
Demo1:

计数：

<script type="text/javascript"> var w; function startWorker(){ //先判断是否支持Web Worker if(typeof(Worker) !== "undefined"){ if(typeof(w) == "undefined"){ //新建一个worker对象 w = new Worker("webworker1.js"); } w.onmessage = function(e){ document.getElementById("res").innerHTML = e.data; } }else{ alert("对不起，当前浏览器不支持web Workers"); } } function stopWorker(){ w.terminate(); w = undefined; } </script>

webworker1.js

var i=0;
function numCount(){
    i++;
    self.postMessage(i);
    setTimeout("numCount()",500);
}
numCount();

Demo2:

<script type="text/javascript">
var data = [23,87,45,12,56,9,34];
console.log("排序前:"+data);
var worker = new Worker("webworkers2.js");
worker.onmessage = function(e){
    var data = e.data;
    console.log("排序后:"+data);//排序后:9,12,23,34,45,56,87
};
worker.onerror = function(e){
    console.log("Error:"+e.filename+"("+e.lineto+"):"+e.message);
}
worker.postMessage(data);
</script>

webworker2.js

//这里self引用的是Worker全局作用域中的worker对象(与页面中的Worker对象不是同一个对象)
self.onmessage = function(e){
    var data = e.data;
    data.sort(function(a,b){
        return a-b;//从小到大排序
    });
    //Worker完成工作后，通过调用postMessage()可以把数据再发回页面
    //这里将数组排序后的结果发回页面
    //排序的确是比较消耗时间的操作，因此转交给Worker做就不会阻塞用户界面了
    self.postMessage(data);
};

当页面在worker对象上调用postMessage()方法时，数据会以异步方式被传递给worker，进而触发worker中的message事件。为了处理来自页面的数据，同样也需要创建一个onmessage事件处理程序。
Web Worker:可以运行异步Javascript代码，避免阻塞用户界面。在执行复杂计算和数据处理的时候，这个API非
常有用；否则，这些任务轻则会占用很长时间，重则会导致用户无法与页面交互。