js进阶六：JSON，离线存储，WebSocket，画布，音频视频

sessionStorage 数据创建到浏览器页签关闭
localStorage 数据创建到用户手动清除，或者使用clear(), removeItem(key)删除

sessionStorage 条件：同一个浏览器页签
localStorage 条件：相同域名（协议，域名，端口）的不同网址

频繁 *** 作且安全性不高的数据

增加一条数据

根据key值获取一条数据

根据指定的key删除一条数据

清除所有数据

获取指定索引位的key值

数据项个数

宽高不要写单位，宽高不要在css中设置

默认从左到右，从上到下绘制，宽高为负值的时候往返方向绘制

设置填充颜色（可设置渐变色）

合法的颜色值，rgba（255,255,255，5）

设置描边颜色（可设置渐变色）

填充矩形

设置画笔宽度

描边矩形

开始绘制新的路径，相当于抬起画笔

把路径移动到画布中的指定点，不创建线条

添加一个新点，然后在画布中创建从该点到最后指定点的线条

设置或返回线条末端线帽的样式

设置或返回两条线相交时，所创建的拐角类型

创建从当前点回到起始点的路径，创建线条

绘制已定义的路径

清除指定区域内的像素

创建弧/曲线（用于创建圆形或部分圆）

绘制两条切线之间的弧线

设置或返回文本内容的当前字体属性

设置或返回文本内容的当前对齐方式，水平对齐方式

可选值： center，start ，end，left，right

设置或返回在绘制文本时使用的当前文本基线

可选值： alphabetic ，top ，hanging ，middle ， ideographic ，bottom

在画布上绘制文本

创建线性渐变（用在画布内容上）

创建放射状/环形的渐变（用在画布内容上）

设置或返回用于阴影的颜色

设置或返回用于阴影的模糊级别
paintshadowBlur = 100;

设置阴影偏移

向画布上绘制图像、画布或视频

转换有叠加效果，如果之前有转换，会在之前转换的基础上再次转换

缩放当前绘图

旋转当前绘图

重新映射画布上的 (0,0) 位置

可选值：

设置或返回绘图的当前 alpha 或透明值

保存之前paint设置的样式

重新回到之前保存的样式

建立连接成功

接收服务器信息， evendata 包含返回的信息

发生错误

关闭通信

当音频元数据加载完毕时触发。

播放过程中实时触发

声音改变时触发

<div style="width:200px;height:200px;border:1px solid #ccc;color:#555" onmouseover="size()" onmouseout="size1()" id="d1">
sajdaskjdaslkj
</div>
<script language="javascript">
function size(){
documentgetElementById("d1")stylecolor = "red"
}
function size1(){
documentgetElementById("d1")stylecolor = "#888"
}
</script>
这个是比较容易懂的一种写法，虽然不简单，希望你能看懂。

通过js动态获取屏幕的宽度（documentclientWidth）然后根据屏幕宽度动态计算出rem的实际值。

假设，640px的设备 1rem = 100px
公式： rem = documentclientWidth / 640 100px;

在ps软件内花的字体里面是带有花的底图页面上制作的方法如下1在系统内拖出图如下

2新建----2个白色画布移动其中一个白色画布上

3在上----点开字体----横排文字蒙版工具调整字体的大小画好字框

4这时会看到蚂蚁线的5移动工具移到另个空白的文档上即可看到花的字体

关于----字体可以在线字体查询ok

em由来： font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：
1px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。
2好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。
3知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。
在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：
1 物理像素(physical pixel)
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2逻辑像素
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3设备的像素比(device pixel ratio)简称DPR
它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为DPR啊啊啊，大哥~。
没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：
1在JavaScript中，通过 windowdevicePixelRatio 来获取
2在css中，可以通过 -webkit-device-pixel-ratio ， -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：
一，用媒体查询来设置html的font-size：

二、利用js来动态设置

我要说的是最后一种，也是我认为目前比较好的实现方法：
利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的 font-size ，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

转自 >