JSON
- JavaScript Object Notation
- JS对象表示法
- JSON是表示数据的一种格式
- JSON实际就是一个字符串，但是JSON这个字符串的格式比较特殊
- JSON的语法和JS对象的语法基本一致，但是注意JSON中的属性名必须加双引号
- JSON可以被任意的语言任意的平台所识别，并且可以转换为任意语言的对象
- 在开发中我们经常使用JSON来进行数据的交换，或者是编写配置文件
- JSON语法规范：
- JSON对象
- '{ }'
- JSON数组
- '[]'
- JSON中可以使用的数据类型
- 1.字符串
- 2.数值
- 3.布尔值
- 4.null
- 5.对象
- 6.数组
stringify(JSON对象)
-
需要一个JSON对象作为参数，可以将该对象转换为JSON字符串返回
var result = JSON.stringify(arr);
parse(string字符串)
可以将一个字符串转换为JSON对象
JSON这个工具类在IE7及以下的浏览器中不支持
-
如果需要兼容这些老版本的浏览器，则可以引入一个外部的JSON文件，来处理该问题
var result = JSON.parse(str3);
离线存储
cookie
- cookie由服务器创建，第一次响应后，记录在浏览器
- 每次请求，cookie都会发动到服务器
- 每次响应，cookie都会推送到浏览器
- 在浏览器读取cookie比较繁琐
- cookie容量小，只有4kb
sessionStorage / localStorage
生命周期
sessionStorage 数据创建到浏览器页签关闭
localStorage 数据创建到用户手动清除，或者使用clear(), removeItem(key)删除
数据共享
sessionStorage 条件：同一个浏览器页签
localStorage 条件：相同域名（协议，域名，端口）的不同网址
使用场景
频繁操作且安全性不高的数据
存储数据格式
- 1.数字
- 2.字符串
- 3.如果实JSON对象，需要使用
JSON.stringify(JSON)转成string;获取后再调用JSON.parse(JSON的字符串)转成JSON对象再使用。
属性方法
setItem(key, value)
增加一条数据
getItem(key)
根据key值获取一条数据
removeItem(key)
根据指定的key删除一条数据
clear()
清除所有数据
key(num)
获取指定索引位的key值
length
数据项个数
sessionStorage.setItem("name", "老二");
sessionStorage.getItem("name");
sessionStorage.removeItem("name");
sessionStorage.clear();
var key = sessionStorage.key(2);
sessionStorage.length;
画布
宽高不要写单位，宽高不要在css中设置
<canvas id="mycanvas" width=”1024” height=”768”>
抱歉，你的浏览器不支持Canvas元素
</canvas>
var mycanvas = document.querySelector("#mycanvas");
if(mycanvas.getContext){
//获取画画笔
var paint = mycanvas.getContext("2d");
}
API
默认从左到右，从上到下绘制，宽高为负值的时候往返方向绘制
绘制矩形
fillStyle
设置填充颜色（可设置渐变色）
合法的颜色值，rgba（255,255,255，.5）
paint.fillStyle = "red";
strokeStyle
设置描边颜色（可设置渐变色）
paint.strokeStyle = "red";
fillRect(起始点X坐标，起始点Y坐标，宽，高)
填充矩形
paint.fillRect(100, 100, 200, -200);
lineWidth
设置画笔宽度
paint.lineWidth = 10;
strokeRect(起始点X坐标，起始点Y坐标，宽，高)
描边矩形
paint.strokeRect(0, 0, 100, 100);
绘制线段
beginPath()
开始绘制新的路径，相当于抬起画笔
paint.beginPath();
moveTo(x坐标, y坐标)
把路径移动到画布中的指定点，不创建线条
paint.moveTo(50, 50);
lineTo(x坐标, y坐标)
添加一个新点，然后在画布中创建从该点到最后指定点的线条
paint.lineTo(100, 100);
lineCap
设置或返回线条末端线帽的样式
butt默认。向线条的每个末端添加平直的边缘。round向线条的每个末端添加圆形线帽。-
square向线条的每个末端添加正方形线帽。paint.lineCap = "round";
lineJoin
设置或返回两条线相交时，所创建的拐角类型
bevel创建斜角。round创建圆角。-
miter默认。创建尖角。paint.lineJoin = "round";
closePath()
创建从当前点回到起始点的路径，创建线条
paint.closePath();
stroke()
绘制已定义的路径
paint.stroke();
clearRect(起始x坐标, 起始y坐标, 结束x坐标, 结束y坐标)
清除指定区域内的像素
paint.clearRect(0, 0, 800, 800);
arc(圆心X左边，圆心Y坐标，半径，起始角度，结束角度)
创建弧/曲线（用于创建圆形或部分圆）
paint.arc(100, 100, 50, 0, .5 * Math.PI);
arcTo(弧的起点的 x 坐标，弧的起点的y坐标，弧的终点的 x 坐标，弧的终点的 y 坐标，弧的半径)
绘制两条切线之间的弧线
paint.arcTo(150,20,150,70,50);
绘制文字
font
设置或返回文本内容的当前字体属性
paint.font = "100px Arial";
textAlign
设置或返回文本内容的当前对齐方式，水平对齐方式
可选值：center，start ，end，left，right
paint.textAlign = "start";
textBaseline
设置或返回在绘制文本时使用的当前文本基线
可选值：alphabetic ，top ，hanging ，middle ， ideographic ，bottom
paint.textBaseline = "middle";
strockText(绘制的文本, X左标, Y坐标)/fillText(绘制的文本, X左标, Y坐标)
在画布上绘制文本
paint.strokeText("hello", 100, 100);
paint.fillText("Hello World!",10,50);
设置渐变
createLinearGradient( 渐变开始点的 x 坐标 ,渐变开始点的 y 坐标 ,渐变结束点的 x 坐标 , 渐变结束点的 y 坐标)
创建线性渐变（用在画布内容上）
var canvasGradient = paint.createLinearGradient(50, 50, 250, 250);
createRadialGradient(渐变的开始圆的 x 坐标 ,渐变的开始圆的 y 坐标 , 开始圆的半径 , 渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径 );
var canvasGradient = paint.createRadialGradient(200, 200,50, 300, 300,100);
addColorStop(0.0 与 1.0 之间的值, CSS 颜色值);
创建放射状/环形的渐变（用在画布内容上）
canvasGradient.addColorStop(0, "red");
canvasGradient.addColorStop(.5, "blue");
设置阴影
shadowColor
设置或返回用于阴影的颜色
paint.shadowColor = "red";
shadowBlur
设置或返回用于阴影的模糊级别
paint.shadowBlur = 100;
shadowOffsetX/shadowOffsetY
设置阴影偏移
paint.shadowOffsetX = 100;
paint.shadowOffsetY = 100;
绘制图像/视频
drawImage( 规定要使用的图像、画布或视频dom对象,图像的 x 坐标，图像的 y 坐)
向画布上绘制图像、画布或视频
paint.drawImage(imgDom,100 0);
转换
转换有叠加效果，如果之前有转换，会在之前转换的基础上再次转换
scale(缩放绘图的宽度,缩放绘图的高度)
缩放当前绘图
paint.scale(2,2);
rotate(旋转角度)
旋转当前绘图
paint.rotate(20*Math.PI/180);
translate(X偏移距离,Y偏移距离)
重新映射画布上的 (0,0) 位置
paint.translate(70,70);
合成
globalCompositeOperation
可选值：
source-over默认。在目标图像上显示源图像。source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的- 部分是不可见的。source-in在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。source-out在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。destination-over在源图像上方显示目标图像。destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。可以用来设置刮刮卡效果lighter显示源图像 + 目标图像。copy显示源图像。忽略目标图像。-
xor使用异或操作对源图像与目标图像进行组合。paint.globalCompositeOperation = "destination-out";
globalAlpha
设置或返回绘图的当前 alpha 或透明值
paint.globalAlpha=0.2;
save()
保存之前paint设置的样式
paint.save()
restore()
重新回到之前保存的样式
paint.restore()
WebSocket
var webSocket = new WebSocket(“ws://echo.websocket.org/“);传一个socket服务器地址
事件
onopen
建立连接成功
onmessage
接收服务器信息，even.data包含返回的信息
onerror
发生错误
onclose
关闭通信
方法
send（“要发送的信息”）
close（）
优点
- 实现长连接
- 减少无用信息传递，节省带宽。
- 全双工（Full Duplex）： 请求与响应可以同步进行。
- 减少延迟：一旦建立Websocket连接，只要服务器有可用消息就会推送到客户端。 它与轮询由本质区别，只有一个连且实时“推送”信息。
- 可以跨源（origin）请求第三方服务
- 简单易用
音频/视频
<audio src="meida/Love%20the%20way%20you%20lie.mp3"
<!--设置显示控制界面-->
controls = controls
<!--设置是否循环播放-->
loop = loop
<!--设置是否预加载
�metadata：提示浏览器不要预加载音频文件。可以预加载时长(duration)和音轨（tracks）这样的元数据
auto : 建议浏览器加载音频文件，设置自动播放肯定会加载
none：不提前加载。
-->
preload="metadata">
vidio
src： 指定视频资源地址
controls： 布尔值。 为视频增加控制界面
preload： 预加载
auto : 建议浏览器载视频文件。 仅仅是建议，当浏览器检测到当前是移动设备或者连接较慢时，浏览器可能不要预加载。以及节省流量或者带宽。
metadata： 提示浏览器不要预加载视频文件。可以预加载时长(duration)和音轨（tracks）这样的元数据。
none：不预先加载视频。
autoplay：布尔值。 告诉浏览器自动播放，一旦设置该属性就会触发加载，尽管可以使用该属性，但不要使用它。尤其是在移动端。
loop：布尔值。 告诉浏览器重复播放视频。也应该谨慎使用。
子元素<source>：可以指定多个视频格式。至少需要包含ogg免费格式，以及.mp4或者webm格式。这种方法应该基本覆盖了最新浏览器。
poster：占位图。一般视图片的URL。
方法
paly()开始播放
pause()暂停播放
事件
onloadedmetadata
当音频元数据加载完毕时触发。
ontimeupdate
播放过程中实时触发
onvolumechange
声音改变时触发
even.target
- duration 音频总时长（返回未格式化的秒）
- currentTime 音频已经播放时长（返回未格式化的秒）
- volume： 0~1的任意值。控制音量。
- muted： 布尔值。静音。（ture表示静音，false表示非静音）
- paused：布尔值。音频文件是否暂停。（ture表示暂停，false表示播放）
- ended：布尔值。音频文件播放结束（ture表示播放结束，false表示播放中或者暂停）
