js进阶六:JSON,离线存储,WebSocket,画布,音频/

2020-01-17  本文已影响0人  蘭小木

JSON

stringify(JSON对象)

parse(string字符串)


离线存储

cookie

sessionStorage / localStorage

生命周期

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

数据共享

sessionStorage 条件:同一个浏览器页签
localStorage 条件:相同域名(协议,域名,端口)的不同网址

使用场景

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

存储数据格式

属性方法

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

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

lineJoin

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

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

可选值:

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()

优点


音频/视频

<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

上一篇 下一篇

猜你喜欢

热点阅读