HTML5 的一些小的整理吧
主要的就是一些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); }
