HTML5的一些新特性1

2017-11-23 本文已影响21人 Yytg

HTML5的一些新特性

地理定位: geolocation

1.PC端定位: 依靠IP地址定位（IP库），精度低

2.移动端定位: 依靠GPS,精度高
使用方法

// 单次定位：getCurrentPosition(成功，失败，参数)；返回用户当前的位置
window.navigator.geolocation.getCurrentPosition(function(res){},function(err){},{});
// 监听：watchPosition(成功，失败，参数);返回用户当前的位置，并继续返回用户移动后的位置
window.navigator.geolocation.watchPosition(function(res){},function(err){},{});

简单实例：

<script type="text/javascript">
  if(navigator.geolocation){
    alert("支持地理定位");
    navigator.geolocation.getCurrentPosition(function(data){
      alert("定位成功");
      console.log(data);
    },function(err){
      alert("定位失败");
    },{});
  }else{
    alert("你的浏览器不支持地理定位");
  }

data值：

1.png

latitude: 纬度值
longitude：经度值
accuracy ：精度值
heading：方向
altitudeAccuracy ：高度精确值
speed ：速度

video,audio: 播放视频，播放音频
js接口：

play(); 播放
pause(); 暂停
currentTime: 当前播放位置
duration: 长度
volume: 音量
muted: 静音(布尔值)

localStorage：本地存储(代替cookie本地存储)
用法和json使用一样, 永久保存在客户端浏览器中
sessionStorage和localStorage用法一样，但浏览器窗口关闭数据就不存在了。

localStorage.name = "naruto"; // 设置
console.log(localStorage.name); // 读取
delete localStorage.name; // 删除
for in //遍历

文件拖拽

<div class="content">
  将文件拖到此处上传
</div>
<script>
  let box = document.querySelector(".content");
  box.addEventListener("dragenter",function(){  // 拖入
    box.innerHTML = "鼠标松开上传";
  });
  box.addEventListener("dragleave",function(){
    box.innerHTML = "将文件拖到此处上传"; // 离开
  });
  box.addEventListener("dragover",function(ev){     // 悬停
    console.log("a");
    ev.preventDefault();
  });
  box.addEventListener("drop",function(ev){ // 松手 松开鼠标——如果dragover不阻止默认事件，drop不会发生
   //console.log("drop");
    console.log(ev.dataTransfer.files);
   ev.preventDefault();
 },false);
</script>

FileReader
FileReader: FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容

// 实现上传本地图片
<form name="upLoadImg">
  <table>
    <tbody>
      <tr>
        <td><img id="uploadPreview" style="width:150px;height:150px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="img"></td>
        <td><input id="files" type="file" name="fileArea"></td>
      </tr>
    </tbody>
  </table>
  <p><input id="upLoad" type="submit" name="上传" value="上传"></p>
</form>
<script type="text/javascript">
let rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
let upLoad = document.getElementById("upLoad"); // 上传按钮
let uploadPreview = document.getElementById("uploadPreview"); // 图片区域
let uploadfile = document.getElementById("files"); // 选择图片
uploadfile.onchange = function(){
  if(uploadfile.files.length === 0){return;}
  let oFile = uploadfile.files[0];
  if(!rFilter.test(oFile.type)){ //是否是图片文件
    alert("无效的文件");
    return;
  }
  // 创建FileReader对象
  //FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
 let reader = new FileReader();
  console.log(oFile); //
  reader.onload = function(e){   // 成功时
    alert("上传成功");
    uploadPreview.src = e.target.result;
  }
  reader.readAsDataURL(oFile); // 以base64方式读取图片
}
</script>
reader.readAsText(oFile)  //读取文本
reader.readAsDataURL(oFile)  //以base64方式读取，上传图片
reader.readAsArrayBuffer(oFile) //原始二进制数据，编辑，不实用
reader.readAsBinaryString(oFile) // 二进制文本数据形式传输，实现上传

canvas绘图

canvas：画布，可以画任何东西

// 元素
<canvas id="cns"></canvas>
let cns = document.getElementById("cns");
let ctx = cns.getContext('2d'); // 获取上下文
ctx.moveTo(); //起点
ctx.lineTo(); // 开始画下一个点
ctx.strokeStyle = color; // 画线的颜色设置
ctx.stroke(); //画线
ctx.fillStyle = color; // 填充颜色
ctx.fill(); // 填充
直接画矩形的方法： ctx.fillRect();
画弧：ctx.arc(圆心坐标,半径,起始弧度,结束弧度,是否逆时针);
要画多条线的话,每次要ctx.beginPath();
闭合路径： ctx.closePath();
画饼状图的例子:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d'); // 获取上下文
let cx = 300,cy = 200,r=150;
// degree -> rad 角度转弧度
function d2a(n){
  return n*Math.PI/180;
}
// rad -> degree 弧度转角度
function a2d(n){
  return n*180/Math.PI;
}
function fn(startAng,endAng,color){
  ctx.beginPath();
  ctx.moveTo(cx,cy);
  let x = cx + Math.sin(d2a(startAng))*r;
  let y = cy - Math.cos(d2a(startAng))*r;
  ctx.lineTo(x,y);
  ctx.arc(cx,cy,r,d2a(startAng-90),d2a(endAng-90),false);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}
let data = [800,100,300,40,500];
let color = ['#FF8C00','#FA8072','#EEB422','#EE9572','#EE30A7'];
let sum = data.reduce((tmp,item,index)=>tmp+item)// 求总和
let angs = data.map(item=>360*item/sum); // 求占度数
// 以上一个fn的结束角作为下一个fn的起始角
let last = 0;
angs.forEach((ang,index)=>{
  fn(last,last+ang,color[index]);
  last += ang;
})

HTML5的一些新特性1

HTML5的一些新特性

猜你喜欢

热点阅读