深夜三点三十一分，家中电话响起，传来奶奶离世的噩耗，然而我无法即刻归家。不妨借助整理的笔记kaiyun全站网页版登录，以此作为对奶奶的纪念。纵使奶奶无法阅读，若手头有那张黑白照片，我定会以canvas为纸，绘制一幅悼念之作。
直入正题，主要涉及的是HTML 5 API的应用，部分内容是参考了其他人的博客，还有MDN（其中中文版的内容尚可理解）。
具体的代码在 有道云笔记里面也有。
先把总得列出来
1、Canvas绘图
学完了相关知识后，我尝试着自己编写了一个贪吃蛇游戏。然而云开·全站体育app登录，由于技术能力有限，我只能完成了一个类似于老式手机屏幕校准的功能。接下来，我将会开始编写游戏的代码部分。
**画圆**
获取元素c，该元素对应于ID为"canvas_Main"的HTML元素。
var cxt=c.getContext("2d");
cxt.fillStyle = Get_Color; // 此操作用于设定颜色，该颜色格式在“有道云”中有所说明；或许因为方法简单，所以选择保留此应用未进行卸载。
//-----------可以加上 阴影
cxt.setShadowOffsetX(5); // 设置阴影在X轴上的偏移量为5
cxt.setShadowOffsetY(3); // 设置阴影在Y轴上的偏移量为3
cxt.shadowBlur = 5; // 模糊尺寸
cxt的阴影颜色被设置为Get_Color函数获取的颜色值。
//---------------------------
cxt.beginPath; //开始绘制
绘制一个圆弧，其中心坐标为（rand_X，rand_Y），半径为25，起始角度为0，结束角度为π乘以2，且绘制方向为顺时针。
cxt.closePath; // 结束绘制
cxt.fill; //填充到所画区域
---
绘制图像时，首先需要获取元素，具体操作为通过`getElementById`函数，传入参数`'canvas_id'`，从而得到ID为`canvas_id`的DOM对象，并将其赋值给变量`dom`。
获取dom元素后，使用2D绘图上下文，通过调用getContext方法，将变量ctx赋值为该上下文。
var img=new Image;
img.src="../....";
ctx.drawImage(img,x,y);
---
** 清除画布**
清除指定区域内的内容，其中x坐标为起始点，y坐标为起始点，x1坐标为结束点的x坐标，y1坐标为结束点的y坐标。
---
** canvas 保存图片 并下载到本地**
这里实际上可以设计成动态形式，只需传递canvas的标识符，再加上所需的图片格式即可。
定义一个名为Download的函数，其参数包括cansid和picType。
//cavas 保存图片到本地 js 实现
坚决杜绝任何对专业知识的篡改与歪曲，确保学术研究的严谨性和真实性，维护学术界的纯洁与尊严。
首先，需要明确图片的具体类别；其次，获取到的图片格式信息为data:image/Png;base64,......。
var type =picType;
获取文档中ID为cansid的元素，并将其赋值给变量d。
获取图片数据，通过调用d对象的toDataURL方法，并指定类型参数type。
将文件类型标识从“mime-type”更改为“image/octet-stream”，此举旨在强制浏览器执行下载操作。
var fixtype=function(type){
将变量type的值转换为小写，并替换其中的"jpg"为"jpeg"。
r等于type字符串与正则表达式/png|jpeg|bmp|gif/匹配后取出的第一个结果。
return 'image/'+r;
};
imgdata变量经过替换操作，将指定类型的fixtype函数返回值对应的字符串，改为了'image/octet-stream'这一值。
//3.0 将图片保存到本地
定义一个名为`savaFile`的函数，该函数接受两个参数：`data`和`filename`。
{
创建一个元素，该元素属于XML命名空间，并指定为'a'标签，命名为save_link，通过document.createElementNS方法实现。
save_link.href=data;
save_link.download=filename;
创建一个名为event的变量，它代表一个通过调用document对象的createEvent方法所生成的鼠标事件。
触发事件save_link的dispatchEvent方法。
};
保存的文件名由当前日期加上相应的后缀组成，具体格式如下：''+new Date.getDate+'.'+type;，详细内容请参考下面的①部分。
savaFile(imgdata,filename);
};
/* ①
var myDate = new Date;
myDate.getYear; //获取当前年份(2位)
通过调用myDate对象的getFullYear方法，我们可以获取一个完整的年份信息，该年份由四位数字组成，时间范围从1970年开始，直至未来某个不确定的时间点。
获取当前日期的月份信息（数值范围在0到11之间，其中0代表一月份）。
myDate.getDate; //获取当前日(1-31)
获取当前日期对应的星期数（取值范围为0至6，其中0代表星期日）。
myDate对象调用getTime方法，以获取自1970年1月1日以来的毫秒数，代表当前时间。
myDate对象调用getHours方法，目的在于获取并输出当前时间的小时数，该小时数范围从0至23。
获取当前时间的分钟值（范围在0至59之间），使用myDate对象的getMinutes方法。
获取当前时间的秒值，范围在0到59之间，通过调用myDate对象的getSeconds方法实现。
获取当前时间的毫秒值，范围介于0至999之间，通过调用myDate对象的getMilliseconds方法实现。
获取当前日期的字符串表示，使用toLocaleDateString方法。
获取当前日期与时间的本地化字符串表示。
*/
```
在这里附上有道云的笔记地址吧：
严禁擅自更改链接地址，确保分享内容的准确性，不得随意修改“有道云笔记”公开链接中的标识码，请务必保持链接的完整性。
该文件禁止进行任何形式的修改，专有名词不得更改kaiyun.ccm，且不得添加任何非原文内容。
处理postMessage的跨域和多窗口数据传输问题，目前遇到了一些难题，感觉有些头绪不清。
requestAnimationFrame动画，对于初学者来说，其动画技术显得相当复杂和深奥。
4、PageVisibility API页面可见性
名字这么高端 具体是怎样呢？
其实也就是是你的页面是否在当前可用窗口
pageVisibility属性的设定分为两种情况：一种是隐藏，表现为hidden；另一种是可见，表现为visible。
当前页面你正在浏览的网页，其pageVisiblity属性已设定为可见状态。
将某个网页界面转为最小化状态，或者执行WIN+D快捷键后，此刻该网页的PageVisibility属性会变为隐藏。
在具体案例中，当网页上的视频播放过程中，若用户将窗口最小化或切换至后台，视频将自动暂停播放。
这段代码源自一位前端领域的大师张鑫旭的博客，其博客地址是http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/。
(function {
若页面不可见属性在类型上并未被定义为未定义。
获取页面中ID为"videoElement"的元素，并将其赋值给变量eleVideo。
// 视频时间更新的时候
eleVideo对象注册了"timeupdate"事件监听器，当该事件发生时，会执行一个匿名函数。
}, false);
// 视频暂停的时候
eleVideo注册了“暂停”事件监听器，当事件触发时，将执行一个匿名函数。
if (pageVisibility.hidden) {
// 如果是因为页面不可见导致的视频暂停
sessionStorage的pauseByVisibility属性被设置为"true"。
}
}, false);
// 视频播放时候
eleVideo注册了“播放”事件监听器，当该事件触发时，将执行一个匿名函数。
sessionStorage暂停功能的设置被设定为"不启用"；其属性pauseByVisibility的值为"false"。
}, false);
// 本页面可见性改变的时候
页面可见性变化时，执行以下函数：
if (this.hidden) {
// 页面不可见
eleVideo.pause;
若sessionStorage中pauseByVisibility的值设定为"true"，则禁止执行。
// 页面可见
eleVideo.play;
}
});
} else {
抱歉，您的浏览器目前无法支持页面可见性功能。
}
});
试了这段代码后效果相当不错，如果你使用的是Chrome浏览器，会发现当你离开该页面后，那个喇叭按钮便会自动消失。由于页面中包含了多个js和bootstrop文件，因此没有将其上传。
5、File 本地文件操作
File 的各种属性
名称：字符串 文件标识符 为只读型字符串 不含路径信息
//获取到选中的文件的第 1个文件
获取到文档中id为'input'的元素，并从中提取出文件列表的第一个文件，将其赋值给变量selected_File。
//获取多个文件中的某一个
获取文档中所有输入元素中的文件对象，并将第i个文件对象赋值给变量select_ed。
若出现"files未定义"的错误提示，那表明你可能并未正确选取适当的HTML元素。
在调用“files”方法前，需注意一个jQuery选择器会返回一组匹配的DOM元素。只需对这些获取到的DOM元素进行操作即可。
为File类新增一个名为change的方法，该方法将在文件上传状态发生任何变动时被激活执行。
DOM 对象添加事件监听器，指定事件类型、处理函数以及是否在捕获阶段触发。
文件监听器对“change”事件进行了绑定，处理函数为“hand_vis”，执行优先级设置为false。
function hand_vis
{
// Do what you want
}
获取多个文件
获取元素ID为'xxxx'的文件对象，计算其文件数量，并将结果赋值给变量Filelength。
Size 文件大小 显示为字节 只读的 64位整数
//计算文件大小及个数
// btnFile 为传进来的文件选择框
定义一个函数，用于计算文件大小，参数为btnFile。
{
var nBytes = 0,
获取元素ID为"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除以1024的商等于nApprox时，或者nMultiple的值增加时。
sOutput 等于 nApprox 四舍五入到小数点后三位，接着是空格，然后是 aMultiples 数组中对应 nMultiple 的元素，再是括号，括号内是 nBytes 字节数，最后是闭括号和句号。
}
在输出显示中，请提供文件数量（FileNum）和文件大小（FileSize），这两个信息可以作为控件的标识符，并且可以选择性地进行传递。
获取元素ID为"fileNum"的文档内容，将其内部HTML设置为变量nFiles的值。
获取元素ID为"fileSize"的文档内容，将其内部HTML设置为sOutput的值。
}
隐藏按钮用A标签做上传按钮 ==》隐藏是否选中
---
图片预览
```
js部分
通过文件路径访问文件
var dsFile = 从Components中获取类，其标识为"@mozilla.org/file/directory_service;1"。
获取至Components接口下的nsIProperties接口的服务对象。
获取"ProfD"，将其与Components接口中的nsIFile对象关联，构建键值对。
dsFile中添加了名为"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，且类型设置为false。
6、Geolocation 地理定位
先前已经准备好了要一次性发布，毕竟已经有一段时间未曾更新了；恰逢奶奶离世，便想分享一些东西以作纪念。
localStorage和sessionStorage用于存储
即时数据存储：sessionStorage 持久数据存储：localStorage
他们的数据存储形式为键值对，建议的操作方式是使用 getItem('key','value') 来获取，以及用 setItem('key','value') 来设置。
#### sessionStorage 用法
*==添加==*
sessionStorage.setItem('key', 'value'); // 在这里，我们建立了一个名为“key”的sessionStorage对象，并为其赋予了“value”作为存储的值。
---
*==获取==*
通过sessionStorage对象获取名为'key'的键值对，进而提取出相应的value值，因为键值对结构中仅需获取键即可获得值。
---
*==删除==*
获取到存储在sessionStorage中的名为'key'的数据，并将其赋值给变量message。
移除sessionStorage中的message后，若使用key去检索该值，发现其结果仅为null或不存在任何字段，此时进行查找便失去了实际意义。
#### localStorage用法
*==添加==*
localStorage变量中的a属性被赋值为3，同时，通过setItem方法将键'a'的值设置为'3'。
---
*==获取==*
获取存储在本地存储中的键为'a'的数据，并将其赋值给变量message。
---
*== 删除==*
移除名为'a'的存储项；若需批量清除，请使用'clear'方法。
---
// 如果不知道有多少键值的时候 可以使用
function show_keyvalue
{
定义变量storage，使其等于window对象下的localStorage属性。
for(var i=0;i
