HTML5 的一些小的整理吧 html5总结

凌晨3:31家里打来电话 奶奶走了 ，可是并不能回去。用一些整理的笔记来纪念吧 虽然奶奶看不懂，如果手头有黑白的那张照片 我一定会用canvas 画一张悼词。

说正题吧，主要的就是一些HTML 5 API 的使用 也是借鉴别人的博客 ，和MDN（中文部分的还是能看的懂） 上面的一些东西

具体的代码在 有道云笔记里面也有。

先把总得列出来

1、Canvas绘图

学完这个 自己准备写一个贪吃蛇的 结果技术不到家 就只写了一个类似于原来老式手机的屏幕校准 下一篇就上代码

**画圆**

var c=document.getElementById("canvas_Main");
 var cxt=c.getContext("2d");    
 cxt.fillStyle=Get_Color; //获取颜色  颜色格式 "#  有道云里面有写这个方法 可能是很傻所以就没有卸载这上面"
 //-----------可以加上 阴影
 cxt.shadowOffsetX = 5; // 阴影Y轴偏移
 cxt.shadowOffsetY = 3; // 阴影X轴偏移
 cxt.shadowBlur = 5; // 模糊尺寸
 cxt.shadowColor =Get_Color; // 颜色*/
 //---------------------------
 cxt.beginPath; //开始绘制
 cxt.arc(rand_X,rand_Y,25,0,Math.PI*2,true); //arc(x,y,半径，起始角度，结束角度，是否顺时针)
 cxt.closePath; // 结束绘制
 cxt.fill;    //填充到所画区域
---

 **画图片**var  dom=document.getElementById('canvas_id');
 var  ctx=dom.getContext('2d');
 var  img=new Image;
 img.src="../....";
 ctx.drawImage(img,x,y);  


---

 **  清除画布**


 ctx.clearRect(x，y，x1,y1)  //x1: 结束的x坐标  y1: 结束y坐标
---



 ** canvas 保存图片 并下载到本地**

//这里其实可以做成动态的 就是直接传 canvas的id 就好了 还有自己想要的图片格式
function Download(cansid,picType){
        //cavas 保存图片到本地  js 实现
        //------------------------------------------------------------------------
        //1.确定图片的类型  获取到的图片格式 data:image/Png;base64,...... 
        var type =picType;
        var d=document.getElementById(cansid);
        var imgdata=d.toDataURL(type);
        //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
        var fixtype=function(type){
 type=type.toLocaleLowerCase.replace(/jpg/i,'jpeg');
 var r=type.match(/png|jpeg|bmp|gif/)[0];
 return 'image/'+r;
        };
        imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
        //3.0 将图片保存到本地
        var savaFile=function(data,filename)
        {
 var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
 save_link.href=data;
 save_link.download=filename;
 var event=document.createEvent('MouseEvents');
 event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
 save_link.dispatchEvent(event);
        };
        var filename=''+new Date.getDate+'.'+type;   //保存的名字为时间+后缀   更多时间请见下面 ①处
        savaFile(imgdata,filename);
        };
/* ①
        var myDate = new Date;
        myDate.getYear; //获取当前年份(2位)
        myDate.getFullYear; //获取完整的年份(4位,1970-????)
        myDate.getMonth; //获取当前月份(0-11,0代表1月)
        myDate.getDate; //获取当前日(1-31)
        myDate.getDay; //获取当前星期X(0-6,0代表星期天)
        myDate.getTime; //获取当前时间(从1970.1.1开始的毫秒数)
        myDate.getHours; //获取当前小时数(0-23)
        myDate.getMinutes; //获取当前分钟数(0-59)
        myDate.getSeconds; //获取当前秒数(0-59)
        myDate.getMilliseconds; //获取当前毫秒数(0-999)
        myDate.toLocaleDateString; //获取当前日期
        var mytime=myDate.toLocaleTimeString; //获取当前时间
        myDate.toLocaleString; //获取日期与时间
*/    
```

在这里附上有道云的笔记地址吧：http://note.youdao.com/yws/public/redirect/share?id=7ba2f32507c4e243bf7c76c94cb5518f&type=false

2、postMessage跨域、多窗口传输  ==>暂时有点头疼 摸不清

3、requestAnimationFrame动画 ==》菜鸟入门 动画太高深

4、PageVisibility API页面可见性

名字这么高端 具体是怎样呢？

其实也就是是你的页面是否在当前可用窗口

pageVisibility 的属性：hidden 隐藏  visible 可

visible ==》你当前正在访问的这个网页 的pageVisiblity 属性为 visible 

hidden ==> 你把某个页面切换到最小化 或者是WIN+D 之后 此时网页的PageVisibility 属性为hidden  

具体案例==》网页播放视频时 最小化或者当前窗口为后台窗口时 视频暂停

//这段代码是看的一位前端大神的 张鑫旭的博客 网址为：http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/

(function {
    if (typeof pageVisibility.hidden !== "undefined") {
        var eleVideo = document.querySelector("#videoElement");
        // 视频时间更新的时候
        eleVideo.addEventListener("timeupdate", function { 
        }, false);
        // 视频暂停的时候
        eleVideo.addEventListener("pause", function{
 if (pageVisibility.hidden) {
 // 如果是因为页面不可见导致的视频暂停
 sessionStorage.pauseByVisibility = "true";
 }
        }, false);
        // 视频播放时候
        eleVideo.addEventListener("play", function {
 sessionStorage.pauseByVisibility = "false";    
        }, false);
        // 本页面可见性改变的时候
        pageVisibility.visibilitychange(function {
 if (this.hidden) {
 // 页面不可见
 eleVideo.pause;    
 } else if (sessionStorage.pauseByVisibility === "true") {
 // 页面可见
 eleVideo.play;    
 }
        });
    } else {
        alert("抱歉 你的浏览器暂不支持 Page Visiblity ");    
    }
});

然后根据这段代码自己试了一下还是不错的 用chrome 的话你会看到 当你离开这个页面时 之后 那个喇叭按钮就会隐藏掉哟 由于页面有什么 js、 bootstrop 文件多 就没上传了

5、File 本地文件操作

File 的各种属性 
       Name : string  文件名 只读字符串 不包含任何路径信息
    <input type="File" id='input'>
    //获取到选中的文件的第 1个文件 
    var  selected_File= document.getElementByid('input').files[0]

    <input type='File' id='input' multiline >
    //获取多个文件中的某一个
    var select_ed =document.getElement('input').files[i]
    //如果你有一个"files is undefined"错误，那么就是你没有选择正确的HTML元素，==》
    //忘记了一个jQuery选择器返回的是匹配的DOM元素的列表。用获取的DOM元素调用“files”的方法就可以了。
    
    为File 添加一个change方法 当文件上传的状态做出改变是触发 
    //==》DOM.addEvenListener(被添加的事件,方法名,状态)
    var  file=document.getElemntById('xxx');
        file.addEventListener('change','hand_vis',false);
     function hand_vis
     {
     // Do what you want
     }
        获取多个文件
        var Filelength=document.getElementById('xxxx').File.length;

    Size  文件大小 显示为字节 只读的 64位整数
    //计算文件大小及个数
    // btnFile 为传进来的文件选择框
    function  countFileSize(btnFile)
    {
    var nBytes = 0,
      oFiles = document.getElementById("btnFile").files, 
      nFiles = oFiles.length;
    //声明三个参数  nBytes，OFiles,Nfiles
    // nBytes= 文件的总大小
    // oFiles =获取文件集合
    // Nfiles = 文件集合长度
    for (var nFileId = 0; nFileId < nFiles; nFileId++)
    {
        nBytes += oFiles[nFileId].size; //总文件的大小
    }
    var sOutput = nBytes + " bytes"; //对外输出文件大小
    //声明三个参数  aMultiples ,nMultiple,nApprox
    // aMultiples 文件存储单位
    //nMultiple 倍数
    //nApprox  1024的倍数
    var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], 
      nMultiple = 0, nApprox = nBytes / 1024;
      //当前一步nApprox 大于1  循环计算文件大小 每大于1024的倍数加1 
      //根据nMultiple的倍数 来获取文件的存储单位
      //保留 三位小数为显示信息赋值
    for ( ; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
    }
    // 显示输出  FileNum ,FileSize 为控件ID 可作为选传
    document.getElementById("fileNum").innerHTML = nFiles;
    document.getElementById("fileSize").innerHTML = sOutput;
    }

    隐藏按钮用A标签做上传按钮 ==》隐藏是否选中
    

---

    图片预览<!--
    在页面中创建两个DIV    一个用来存放上传按钮(可以用a标签套用样式凸显按钮的样子)
    一个用来存放 canvas  单纯放一个DIV 图片的大小不会受到控制 原尺寸显示 在手机端时过于浪费带宽
    -->
    <!--HTML 部分-->
      <div id="dropbox"> <input type="file" id="txtfile" onchange="handleFiles(this.files)"/>
      </div>
      <div>
 <canvas id="filecontent" width="400px" height="300"></canvas>
      </div>


```

    js部分
    <script>
    function handleFiles(files)
{
         var preview=document.getElementById('filecontent');
         var ctx=preview.getContext("2d");
    for (var i = 0; i < files.length; i++)
 {
    var file = files[i];
    var imageType = /^image\//;
    
    if ( !imageType.test(file.type) ) {
      continue;
    }
    
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    // 此处的 Ctx是将要展示图片的canvas 
    //如果是准备利用多图片上传 并做多图片预览 那就循环动态的去创建canvas id就按循环条件的i 累加即可结局问题
    img.onload=function{ //如果你发现你的图片没有生成 那就写上这句话 图片都没加载出来 何来缩略图
    ctx.drawImage(img,0,0,400,300);    // 图片 ，起始x轴 ，起始Y轴，缩略宽 ，缩略高
    };    
    var reader = new FileReader;
    reader.onload = (function(aImg) { 
    return function(e) { 
    aImg.src = e.target.result; 
      }; 
    })(img);
    reader.readAsDataURL(file);
  }
}
    </script>

通过文件路径访问文件
    var dsFile = Components.classes["@mozilla.org/file/directory_service;1"]
 .getService(Components.interfaces.nsIProperties)
 .get("ProfD", Components.interfaces.nsIFile); //创建ProfD的键值对
    dsFile.append("myfilename.txt");
    var file = File(dsFile);
    
    本章目的 HTML5实现 ajax 文件上传
    参考网站：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

文件=》H5资料/Files.html5 地址：http://note.youdao.com/yws/public/redirect/share?id=8d1789857c4f713424e4d221b3aebb7d&type=false

6、Geolocation 地理定位
之前是准备都写好了再发出来的 毕竟有些时日没发了 适逢奶奶走了 发点东西留念下

7、localStorage|sessionStorage存储

即时存储 ： seesionStorage   永久存储 ： localStorage
    他们的存储都是以键值对存在的  操作推荐用法为 getItem('key','value') 和 setItem('key','value')
####   sessionStorage 用法
    *==添加==*
    sessionStorage.setitem('key','value'); //此处创建了一个名为key的sessionStorage  其中他的值为 value

---

    *==获取==*
    var  message=sessionStorage.getItem('key'); //由于是键值对 只需获取到其key 就可以取出value 值
    

---

    *==删除==*
    var message=sessionStorage.getItem('key');
    sessionStorage.removeChild(message)  //将其值移除后  即时用key 找寻该值特只是 null 或无字段 没有意义
    
    
####   localStorage用法 

    *==添加==*
    localStorage.a=3;|| localStorage.SetItem('a','3');
    

---
    *==获取==*
    var message=localStorage.getItem('a');
    

---
    *== 删除==*
    localStorage.removeItem('a');  //一次性清除用 clear;

---

    // 如果不知道有多少键值的时候  可以使用  
    function show_keyvalue
    {
        var storage=windows.localStorage;
        for(var i=0;i<storage.length;i++)
        {
 //Do what you want  
        }
    }
    
    // HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。
    // HTML 5 还添加了Storage 事件  可以对键值对改变进行监听
        if(window.addEventListener) //添加监听事件
        {
 window.addEventListener('storage',handle_Storage,false);
        }