HTML基础（二）

JS中关于存储的东西

日期属于js的内置对象

Date 对象用于处理日期和时间。 1970/1/1 0:0:0 28万年

月/日/年 时/分/秒

获取当前时间Date（）

设置时间Date(月/日/年 时/分/秒) ______zifuchuan

​ Date(年，月，日，时，分，秒) __

Day不能设置 星期

cookie :自动登录

​ 临时性cookie:”phone=123456”

​ 时效性cookie:”phone=123456;expires”+time.toGMTString()

获取 console.log(document.cookie)

获取cookie的值

​ 所有cookie是一整个字符串，需要获取某一个cookie的值需要使用字符串中split（‘;’）方法分割cookie

​ 在使用一次split（’=’）可获取到

​

删除带有时效性的cookie 将其时间变为之前的事件

本地存储

localStorage：存储容量大，永久性存储 4-5M

​ 设置 localStorage.setItterm（‘name’，‘zhangsan’）

sessionStroage:会话型（临时）

key:获取键名

JSON.stringify：将对象转化成字符串

JSON.parse:把字符串转化成对象 必须是json格式

    localStorage.setItem('men',JSON.stringify(men))//json字符串
    data=JSON.parse(localStorage.men)//json字符串转为json对象

localStorage和cookie的区别

cookie:容量小，不安全

localStorage：存储容量大，永久性存储 4-5M

canvas（画布）（标量图）

​ svg—-矢量图—–谷歌地图

​ 替换内容

属性

width height

默认尺寸 300*150

画图环境

document.querySelector('canvas').**getContext('2d')**

方法(画图环境上的，不是canvas的)

###矩形

fillRect(x,y,w,h) 填充一个矩形

​ 接收4个参数 前两个位置，后两个尺寸

strokeRect(x,y,w,h) 描边一个矩形

​ 接收4个参数 前两个位置，后两个尺寸

clearRect(x,y,w,h) 清除一个矩形

​ 接收4个参数 前两个位置，后两个尺寸

填充颜色

bi.fillStyle=”blue” 填充颜色

bi.strokeStyle=”blue” 描边颜色

画任意形状（路径）

开始路径–beginPath()

画图

​ 移动：moveTo()

​ 划线：lineTo()

闭合/关闭—closePath()

填充/描边fill() stroke()

//填充三角形
bi.beginPath()    //开始路径
bi.moveTo(20,20)   //移动
bi.lineTo(20,120)  //移动到某个点
bi.lineTo(120,120)
bi.closePath()     //闭合路径
bi.fill()       //填充

//描边三角形
bi.beginPath()    //开始路径
bi.moveTo(40,20)
bi.lineTo(140,20)
bi.lineTo(140,120)
bi.closePath()
bi.stroke()    //描边

画圆

ctx.arc(x,y,r,startAng,endAng,dir)

setLineDash([ 20, 10]) 接收2个参数，长度间隙

线的样式

线宽：lineWidth（）

线末端样式 context.lineCap=”butt|round|square”

拐角：context.lineJoin=”bevel|round|miter”;

​ 平角 圆角 默认

文本

font：设置字体字号

fillText(‘内容’，x,y) 接收3各参数，内容 位置想 y 填充文本

strokelText(‘内容’，x,y,maxwidth) 接收3各参数，内容 位置想 y 文本所占最大宽度 描边文本

textAlign 文本水平对齐方式 “center|end|left|right|start”;

textBaseLine 文本垂直对齐方式 “alphabetic|top|hanging|middle|ideographic|bottom”;

miterLimit=5

​ 注意：lineJoin=’miter’

requestAnimationFrame() 相当于settimeout 只执行一次

canceAnimationFrame() 清除时间函数

图片

putImageDate()

drawImage （） 3 5 9 个参数，最少传3 个参数

img.οnlοad=function(){} 图片加载完执行操作

2new 一个Image

let img=new Image()
 img.src='aaa.png'
img.onload=function(){
}

getImageDate() //返回 ImageData 对象，该对象为画布上任意区域的像素信息

putImageData() //把图像数据（从指定的 ImageData 对象）放回画布上

内容可编辑

contenteditable=’true’