H5的新特性（一）
一、 表单元素
1. <progress>：标签标示任务的进度（进程），进度条（文件上传、下载、加载...），需结合js展示任务进度。
1 <p>max为进度条的进度最大值，value为进度条完成的进度（若无max，value值为0-1之间）</p> 2 <progress value='30' max='100'></progress> 3 <p>没有value值的progress就像一个加载中loading，中间的进度块来回游荡，可以用作loading来使用，表示正在页面加载中</p> 4 <progress></progress>
在chrome浏览器下如图：
2.<meter>：主要表现规定范围内的数量值，例如磁盘的使用量，比例值等。
1 <p>value:实际数量值;min:允许的最小值;max:允许的最大值;low:下限值;high:上限值;optimum:最佳值</p> 2 <meter min="0" low="50" high="150" max="200" optimum="100" value="100"></meter> 3 <p>最佳值optimum在min与low之间：</p> 4 <p>value在min与low之间：<meter min="0" low="50" high="150" max="200" optimum="30" value="20"></meter></p> 5 <p>value在low与high之间：<meter min="0" low="50" high="150" max="200" optimum="30" value="100"></meter></p> 6 <p>value在high与max之间：<meter min="0" low="50" high="150" max="200" optimum="30" value="170"></meter></p> 7 <p>最佳值optimum在low与high之间：</p> 8 <p>value在min与low之间：<meter min="0" low="50" high="150" max="200" optimum="100" value="20"></meter></p> 9 <p>value在low与high之间：<meter min="0" low="50" high="150" max="200" optimum="100" value="100"></meter></p> 10 <p>value在high与max之间：<meter min="0" low="50" high="150" max="200" optimum="100" value="170"></meter></p> 11 <p>最佳值optimum在high与max之间：</p> 12 <p>value在min与low之间：<meter min="0" low="50" high="150" max="200" optimum="170" value="20"></meter></p> 13 <p>value在low与high之间：<meter min="0" low="50" high="150" max="200" optimum="170" value="100"></meter></p> 14 <p>value在high与max之间：<meter min="0" low="50" high="150" max="200" optimum="170" value="170"></meter></p>
在chrome浏览器下如图：
3. <output>：定义不同类型的输出，比如脚本的输出。
1 <!--计算器:for:输出域相关的一个或多个元素--> 2 <form oninput="c.value = parseInt(a.value) + parseInt(b.value)"> 3 <input type="number" id="a" value="50" /> 4 +<input type="number" id="b" value="50" /> 5 =<output name="c" for="a b"></output> 6 </form>
在chrome浏览器下如图：
4. <datalist>：定义选项列表，与 input 元素配合使用（可自定义的下拉框）。
1 <!--input的list与datalist的id对应--> 2 <input id="myFlower" list="flowers" /> 3 <datalist id="flowers"> 4 <option value="Rose"> 5 <option value="Sunflower"> 6 <option value="Dandelion"> 7 </datalist>
在chrome浏览器下如图：
可自定义： 
5. 表单元素的新属性：placeholder、mutiple、autofocus、form、required、min、max、minlength、maxlength、pattern等。
二、音频、视频API（<audio>，<video>）
1. 音频
1 <!--src:歌曲路径;controls:播放控制(显示audio自带的播放控件);loop:歌曲循环;autoplay:歌曲加载后自动播放(只有pc端可以实现)--> 2 <audio src="asset/music/music1.mp3" controls="controls" loop="loop" autoplay="autoplay">您的浏览器不支持html5的audio标签</audio>
在chrome浏览器下如图：
1）对象属性：
(1) currentTime: 当前播放时间；
(2) duration: 歌曲的总时间；
(3) startTime: 返回起始播放时间；
(4) play: 是否在播放，布尔值；
(5) pause: 是否暂停，布尔值；
2）对象方法：
(1) play(): 播放歌曲；
(2) pause(): 暂停歌曲；
(3) load(): 重新加载歌曲；
2. 视频
1 <!--src:视频路径;controls:播放控制(显示video自带的播放控件);loop:视频循环;autoplay:视频加载后自动播放(只有pc端可以实现);preload:如何下载音频--> 2 <video src="asset/video/video1.mp4" controls="controls" loop="loop" autoplay="autoplay" preload="auto"></video>
1）常用事件：
(1) oncanplay: 当文件就绪可以开始播放时触发；
(2) ontimeupdate: 当播放位置（快进、快退）改变时触发；
(3) onended: 当播放到结尾时触发；
2）属性：同上<radio>的1）部分
3）方法：同上<radio>的2）部分
三、.画布API（<canvas)>）
Canvas：H5原生技术，基于网页画布绘制2D位图绘图技术，适合像素处理，动态渲染和大数据量绘制（如网页游戏）；开源可视化JS库：ECharts.js等。
SVG：H5借鉴技术，使用XML技术绘制2D矢量图绘图技术，缩放不会失真，适合静态图片展示，大型渲染区域（如地图），高保真文档查看和打印等应用场景；开源可视化JS库：D3.js 、Highcharts等。
WebGL：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js。
Canvas与SVG的不同：
(1) Canvas是位图；SVG是矢量图；
(2) Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)；
(3) Canvas内容不能使用CSS；SVG内容可以使用CSS；
(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定；
(5) Canvas适合小面积、大数量应用场景；SVG适合大面积、小数量应用场景。
1）矩形
Canvas
1 <canvas id="drawing" width="200" height="200" style="margin-top: 20px;">A Canvas!</canvas>
1 <script> 2 var draw = document.getElementById("drawing"); 3 if (draw.getContext) { 4 var context = draw.getContext("2d"); 5 // 矩形 6 context.fillStyle = "red"; 7 context.strokeStyle = "black"; 8 context.lineWidth = 5; 9 context.lineJoin = "round"; 10 context.fillRect(10,10,50,50); 11 context.strokeRect(10,10,50,50); 12 } 13 </script>
SVG
1 <svg width="200" height="200"> 2 <rect x="10" y="10" width="50" height="50" fill="red" stroke="black" stroke-width="5"></rect> 3 </svg>
2）圆形
Canvas
1 var draw = document.getElementById("drawing"); 2 if (draw.getContext) { 3 var context = draw.getContext("2d"); 4 context.beginPath(); 5 context.arc(100, 100, 50, 0, 360); 6 // 第二个圆 7 context.moveTo(140, 100); 8 context.arc(100, 100, 40, 0, 360); 9 // 画钟表指针 10 context.moveTo(100, 100); 11 context.lineTo(120, 100); 12 context.moveTo(100, 100); 13 context.lineTo(100, 70); 14 // 边框样式 15 context.strokeStyle = "red"; 16 // 阴影 17 context.shadowColor = "black"; 18 context.shadowOffsetX = 5; 19 context.shadowOffsetY = 5; 20 context.shadowBlur = 4; 21 context.stroke(); 22 }
SVG
1 <svg width="200" height="200"> 2 <circle r="50" cx="100" cy="100" fill="red" fill-opacity="0.4" stroke="black" stroke-width="5" stroke-opacity="0.4"></circle> 3 </svg>
用css画圆
1 .div1 { 2 width: 50px; 3 height: 50px; 4 border: 3px solid red; 5 border-radius: 50%; 6 }
3）椭圆
Canvas
1 var draw = document.getElementById("drawing"); 2 if (draw.getContext) { 3 var context = draw.getContext("2d"); 4 if (context.ellipse){ 5 // 参数顺序:起点x坐标，起点y坐标，半径x坐标，半径y坐标，旋转角度，起始角度，结果角度，是否逆时针 6 context.ellipse(100,70,30,50,0,0,360); 7 context.fillStyle = "red"; 8 context.strokeStyle = "black"; 9 context.fill(); 10 context.stroke(); 11 }else { 12 alert("no ellipse!"); 13 }
SVG
1 <svg width="200" height="200"> 2 <ellipse rx="30" ry="50" cx="100" cy="100" fill="red" fill-opacity="0.4" stroke="black" stroke-width="5" stroke-opacity="0.4"></ellipse> 3 </svg>
4）直线
Canvas
1 var draw = document.getElementById("drawing"); 2 if (draw.getContext) { 3 var context = draw.getContext("2d"); 4 context.beginPath(); 5 context.moveTo(10,100); 6 context.lineTo(150,50); 7 context.strokeStyle = "red"; 8 context.lineWidth = 4; 9 // 全局透明度 10 context.globalAlpha = 0.4; 11 context.stroke(); 12 }
SVG
1 <svg width="200" height="200"> 2 <!--line无fill--> 3 <line x1="10" y1="100" x2="150" y2="50" stroke="red" stroke-width="4" stroke-opacity="0.4"></line> 4 </svg>
5）折线
SVG
1 <svg width="500" height="500"> 2 <!--fill需为transparent，否则折线其他部分会填充颜色--> 3 <polyline points="150,200 250,100 350,300 450,50" stroke="black" stroke-width="5" stroke-opacity=".4" fill="transparent"></polyline> 4 </svg>
Canvas: 合理运用moveTo()与lineTo()即可；折线图可用CanvasJS库等。
6）多边形
SVG
1 <svg width="500" height="500"> 2 <!--最后会自动连接起点和终点--> 3 <polygon points="100,150 100,300 300,300 400,150 250,220" fill="red" fill-opacity=".4" stroke="black" stroke-width="5" stroke-opacity=".4"></polygon> 4 </svg>
Canvas: 同上，合理运用moveTo()与lineTo()。
7）渐变
Canvas
1 // 参数：渐变开始位置x，y，结束位置x，y 2 var gradient = context.createLinearGradient(55, 55, 150, 150); 3 // 放射性渐变，参数：渐变开始圆心x，y，半径，结束圆心x，y，半径 4 // var gradient = context.createRadialGradient(100,100,10,100,100,50); 5 // 渐变颜色 6 gradient.addColorStop(0, "white"); 7 gradient.addColorStop(1, "blue"); 8 context.fillStyle = gradient; 9 context.fill();
SVG: SVG 渐变必须在 <defs> 标签中进行定义
1 <svg width="500" height="500"> 2 <!--SVG 渐变必须在 <defs> 标签中进行定义--> 3 <defs> 4 <!--线性渐变：(x1,y1)起始位置，(x2,y2)终止位置--> 5 <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%"> 6 <stop offset="0" stop-color="white"></stop> 7 <stop offset="0.5" stop-color="green"></stop> 8 <stop offset="1" stop-color="blue"></stop> 9 </linearGradient> 10 <!--放射性渐变：(cx,cy)外圈圆心位置，r外圈半径，(fx,fy)内圈圆心位置--> 11 <radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 12 <stop offset="0%" stop-color="white" stop-opacity="0"/> 13 <stop offset="100%" stop-color="blue" stop-opacity="1"/> 14 </radialGradient> 15 </defs> 16 <rect x="0" y="0" height="200" width="200" fill="url(#g)" stroke="url(#g)"></rect> 17 <rect x="200" y="0" height="200" width="200" fill="url(#g1)" stroke="url(#g1)"></rect> 18 </svg>
四、地理定位API（Geolocation）
Geolocation API 允许用户向 Web 应用程序提供他们的位置，如果用户同意，浏览器会返回一个位置信息，通过用户的手机、电脑等底层设备提供给浏览器。
位置获取的几种方式：
1）电脑的IP地址（使用PC浏览器时），存在的误差较大；
2）GPS地理定位，定位精度准确，定位时间较长，室内效果不好；
3）WIFI地理定位，可在室内使用；
4）手机地理定位，通常基于WIFI和GPS的地理定位信息结合使用。
方法：
1. getCurrenPosition(): 确定设备位置，返回一个带有位置信息的Position对象。
1 navigator.geolocation.getCurrentPosition( 2 function (position) { 3 // 成功得到位置信息时的回调函数 4 position.timestamp; //定位时间 5 position.coords.latitude; //纬度 6 position.coords.longitude; //经度 7 position.coords.altitude; //海拔高度 8 position.coords.accuracy; //准确度 9 position.coords.speed; //地面速度 10 position.coords.heading; //行进方向 11 }, 12 function (positionError) { 13 // 可选，获取位置信息失败是时的回调函数 14 console.warn('ERROR(' + positionError.code + '): ' + positionError.message); 15 }, 16 options = { 17 //可选，PositionOptions对象 18 enableHighAccuracy: true, //通知浏览器启用html5服务高精确度模式 19 maximunAge: 0, //表示浏览器重新计算位置的时间间隔，以ms为单位的值 20 timeout: 2000 //告诉浏览器计算当前位置所允许的最长时间，默认为infinity无限大。 21 } 22 );
2. watchPosition(): 注册一个位置改变监听器，每当设备位置改变时，返回一个long类型的ID值。
1 var id = navigator.geolocation.watchPosition( 2 // 参数同getCurrentPosition 3 function (position) { 4 // 若经纬度发生改变时，返回字符串；target为目标位置 5 if(target.latitude === position.coords.latitude && target.longitude === position.coords.longitude){ 6 console.log('恭喜你到达目标！'); 7 // 取消位置监听器 8 navigator.geolocation.clearWatch(id); 9 } 10 }, 11 error, 12 options 13 );
3. clearWatch(): 取消watchPosition()注册的位置监听器；参数为watchPosition()返回的id值。
五、文件拖拽（drag,drop,dataTransfer,FileReader）
1. 拖动原对象触发的事件：
(1) ondragstart: 拖动开始；
(2) ondrag: 拖动中；
(3) ondragend: 拖动结束；
2. 拖动目标对象触发的事件：
(1) ondragenter: 鼠标拖动对象进入时触发；
(2) ondragover: 拖动对象在另一容器悬停时触发；
(3) ondrop: 释放鼠标键时触发；
(4) ondragleave: 拖动对象离开容器时触发；
3. 步骤：
1）为了使元素可拖动，元素的draggable属性需设为true。
2）拖动原对象ondragstart(原对象(被拖元素)event)：获取原对象数据，被拖动时会发生什么
event.dataTransfer.setData("Text", event.target.id): 设置被拖元素数据类型和值。
3）放置的位置ondragover(目标对象(容器)event): 规定在何处放置被拖数据
event.preventDefault(): 阻止元素的默认处理方式；
4）放置ondrop(目标对象(容器)event)
(1) event.preventDefault();
(2) var data = event.dataTransfer.getData("Text"): 获得被拖数据
(3) event.target.appendChild(document.getElementById(data)); 将元素写入目标容器
4. 文件拖拽（配合FileReader）
event.dataTransfer.files: 获取拖拽文件
1） readAsText 以文本方式读取 （多用于读取文本文件）
2） readAsDataURL 以base64方式读取 （多用于读取图片）
3） readAsArrayBuffer 以二进制的方式读取（不常用，js难以操作这种数据类型）
4） readAsBinaryString 以二进制字符串的方式读取 （多用于上传数据）
未完待续...
浙公网安备 33010602011771号