码迷，mamicode.com
首页 > Web开发 > 详细

HTML5知识点总结

时间：2016-06-12 01:53:36      阅读：174      评论：0      收藏：0      [点我收藏+]

标签：

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()方法则可以一级一级返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Save-Restore</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">
当前浏览器不支持canvas
</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>
</body>
</html>

toDataURL方法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toDataURL方法</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">
当浏览器不支持canvas元素
</canvas>
<input type="button" value="导出图片" id="export-btn" >
<p>点击导出图片，即可以将图像变成图片元素，右键点击图片元素即可以将它保存到本地</p>
    <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>
</body>
</html>

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:

<body>
<div id="demo"></div>
<input type="button" name="" value="点击获取位置" onclick="getLocation();">
<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 +
  "<br>经度: " + 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>
</body>

Demo2:

<body>
<input type="button" value="请求" id="btn" /><br>
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
<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>
</body>

watchPosition() 方法

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

<body>
<input type="button" value="请求" id="btn" /><br>
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
<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>
</body>

应用Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>地理位置应用</title>
    <style type="text/css">
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="获取位置" id="btn">
    <div id="box"></div>
    <script src="http://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>
</body>
</html>

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:

<body>
<p>计数：<span id="res"></span></p>
<input type="button" name="" value="开始计数" onclick="startWorker()">
<input type="button" name="" value="停止计数" onclick="stopWorker()">
<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>
</body>

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非
常有用；否则，这些任务轻则会占用很长时间，重则会导致用户无法与页面交互。

HTML5知识点总结

标签：

原文地址：http://blog.csdn.net/liujie19901217/article/details/51626946
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！