主要的就是一些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);
}