h5

1.新增的属性

​ placeholder
​ Calender,data,time,email,url,search input中的
​ ContentEditable
​ Draggable
​ Hidden
​ COntext-menu
​ Date

2.新增的标签

​ 语义化标签 类似div的东西
​ canvas 画板
​ Audio 声音播放
​ Video 视频播放
​ svg 画板

3.API

​ 定位 需要地理位置的功能
​ 重力感应 陀螺仪
​ request-animation-frame 动画优化
​ History 控制当前页面的历史记录
​ LocalStorage, SessionStorage 存储信息 历史最高记录,聊天记录
​ WebSocket 做通信 在线聊天
​ FileReader 文件读取
​ WebWorker 文件的异步 提高交互体验
​ Fetch 传说中要替代Ajax的东西
​
​
​

1.新增属性

placeholder 输入框提示信息 兼容性差

input的新type 兼容性差

Candeler 日期类 丑 兼容性不好 chorme支持 safari,IE 不支持

date 选日期  
	time 选时间
	week 第几周
	datetime-local  本地时间

类型 兼容性不好

	number  只能填数字     chorme支持   safari,火狐，IE不支持 
	email   只能填邮箱  格式不对提示错误    chorme,火狐支持 safari,IE 不支持
	color   颜色选择器     chorme支持    safari,火狐，IE不支持 
	range   选择数字的      chorme,safari支持   火狐，IE不支持 
	search  自动提示之前提交记录   chorme,safari支持   火狐，IE不支持
	url     只能填url 格式不对提示错误     chorme,火狐支持  safari IE不支持

contenteditable 可以修改文本 兼容性差

​ 可以继承 使用时尽量不要嵌套 修改时可以删除里面的标签 true/false

draggle 拖拽效果 兼容性差

​ 只有chorme safari 可以正常使用
​ 虚幻拖拽 原位置不变 默认事件:拖拽周期结束时回到原处 阻止必须写在ondragover
​ 默认可拖拽标签:a img 其他标签默认不能拖拽 true/false

拖拽的组成   被拖拽的物体  目标区域

被拖拽的物体事件
	ondragstart 	拖拽开始(开始移动时触发一次)   clientx clienty 鼠标位置
	ondrag 	        拖拽移动(移动一直触发)     
	ondragend	    拖拽结束(停止拖拽时触发一次)              
目标区域事件 拖拽物理进入的区域
	ondragenter     拖拽鼠标进入目标区域时触发一次
	ondragover		在目标区域移动时一直触发
	ondragleave     拖拽鼠标离开目标区域时触发一次
	ondrop			在目标区域鼠标抬起时触发			
拖拽图标  必须写在ondragstart 和 ondrop中
	e.dataTransfer.effectAllowed   link copy move copyMove all...

事件调用链 默认事件必须在触发的前一个事件阻止

2.新增标签

语义化标签 本质都是div 带有不同涵义的div

 header   页面头部
	 footer   页面底部
	 nav	  导航栏
	 article  文章  直接可以被引用拿走
	 section  段落  
	 aside    侧边栏

canvas 画布 画图工具 做游戏

1.画线

	var ctx = getContext('2d') 获取画笔
	ctx.moveTo(x,y)      起点
	ctx.lineTo(x,y)		 直线的下一个点
	ctx.closePath()		 图形闭合 针对一次路径
	ctx.fill()			 填充环内
	ctx.stroke()		 开始画一条路径   一击一下
	ctx.beginPath()		 重新开始一条路径
	ctx.lineWidth   	 线的宽度

2.画矩形

	ctx.rect(x,y,width,heigth)  	  起点 宽 高
	ctx.strokeRect(x,y,width,height)  直接画一个矩形
	ctx.fillRect(x,y,width,height)    直接或一个填充好的

3.画弧 arc弧

ctx.arc(x,y,半径,起始弧度,结束弧度,方向)       
		 方向:顺时针0  逆时针1   
		 弧度:Math.PI === π 

ctx.arcTo(x1,y1,x2,y2,圆角大小)；
	 (x1,y1) --> (x2,y2)  圆角的方向

4.画Bezier曲线 贝塞尔曲线 一般用不到

	ctx.quadraticCurveTo(x1,y1,x2,y2) 二次贝塞尔曲线   下去的点 上去的点
	ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)   下去 上去 下去

5.平旋转 根据坐标系平移旋转 默认在左上角

    ctx.rotate()  顺时针旋转  根据画布的原点  坐标系也跟着旋转
	ctx.translate(x,y)   改变画布坐标系原点  默认在左上角
	ctx.scale(x扩大倍数,y扩大倍数)   将整个坐标系刻度扩大2倍  缩放
	ctx.save()   保存坐标系 平移缩放数据
	ctx.restore()   还原到保存时候的状态	

6.填充

​ fillStyle = color/bg 填充颜色
​ var bg = ctx.createPattern(img,no-repeat);
​ 图片地址 不重复 repeat重复 图片从坐标系原点开始填充
​

图片异步加载的,可能在填充时图片还没加载出来:
	处理过程写在 img.onload中

7.线性渐变 坐标原点开始 LinearGradient linearGradient

var bg = ctx.createLinearGradient(x1,y1,x2,y2)  从一个点到另一个点
	bg.addColorStop(0,white);  只能0-1 关键点
	bg.addColorStop(1,block);
	fillStyle = bg

8.放射渐变 坐标原点开始 RadialGradient RadialGradient

var bg = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)
	ctx.fillStyle = bg
	bg.addColorStop(0,white);   关键点0-1

9.阴影 shadow

​ ctx.shadowColor 颜色
​ ctx.showBlur
​ ctx.showdowOffsetX 偏移量

10.绘制文字

​ ctx.font 字体大小
​ ctx.strokeText(text,x,y) 文字 坐标 文字描边 空心字
​ ctx.fillText(text,x,y) 文字 坐标 文字填充 实心字

11.线端样式

​ ctx.lineCap 端点样式 square butt原始 round
​ ctx.lineJoin 两线交汇处 round圆滑 beval切平 miter默认

SVG 可以做地图

1.和canvas的区别

​ Svg矢量图 放大不会失真,适合大面积的贴图，通常动画较少或者较简单 标签和css操作
​ Canvas:适合用小面积的绘图 适合动画 js操作
​

2.画线画矩形

​ 线 x1 y1 x2 y2
​ 矩形 height width x1 y1 rx圆角 自动填充
​ css{
​ stroke:colorname;
​ stroke-width:线宽
​ }
​ 不填充：fill:transparent

3.画圆画椭圆折线

​ 圆 r cx cy
​ 椭圆 rx ry cx cy
​ 折线 points = x1 y1 x2 y2 x3 y3 …

4.多边形文字

​ 多边形 points = x1 y1 x2 y2 x3 y3 …
​ x y

5.线条属性

​ stroke-opacity 边框透明度
​ fill-opacity 填充透明度
​ stroke-linecap 线端样式
​ stroke-linejoin 交汇处

6.path标签

​ 大写表示绝对位置(相对原点) 小写表示相对位置(相对前一个点)
​ M起点 m L到哪个点 l H横移到 h V纵向到 v z闭合区间
​ A r1 r2 旋转角度 顺时针 大小弧

7.渐变

​
​
​
​
​
​
​

8.模糊 高斯滤镜

​
​ feGaussianBlur
​

9.虚线

​ stroke-dasharray:虚线长度 1 2 3 …
​ stroke-dashoffset: 空白向左偏移

10.比例尺

​ svg 属性 viewBox = “0 0 250 150” 放大缩小
​

video 视频

​ controls 可以控制
​ autoplay 自动播放
​ play() 播放
​ pause() 暂停
​ video.duration 总时长
​ video.currentTime 当前播放时间
​ playbackRate 倍速 0-1
​ volume 声音 0-1
​ requestFullscreen() 全屏
​ 只有服务器返回的响应头包含content-range才可以设置时间

鼠标点击位置

​ pageX 相对整个html定位
​ clientX 相对可视区定位
​ screenX 相对屏幕定位
​ layerX 相对父级有定位的
​ offsetX 相对当前元素

absolute相对有定位的祖先定位

新增API

1.getLocation 位置信息

2.devicerientation 陀螺仪

​ alpha 方向[0,360)

​ beta 平放 beta = 0 长边立起来 beta = 90

​ gamma 平放时 gamme为0 短边立起来 gamma为90

3.requestAnimationFrame

​ 相当于定时器,比定时器更加准确 每秒执行60帧 兼容性差

requestAnimationFrame(callback)

4.devicemotion 重力

5.localStrorage 本地化存储

6.history 历史访问

为了网页性能会做一个单页面应用

window.addEventLister('popstate')  监听url变化
window.addEventLister('hashchange')  监听锚点变化 

7.worker

js是单线程的
worker是真的多线程 不是伪多线程 一起执行代码
worker不能操作dom 没有window对象 不能读取文件 可以发ajax 可以计算
主线程与辅助线程之间用onmesssage 接收信息 postMessage(发消息)

辅助线程

this.onmessage = function(e){  //接受信息
	var result = 0;
	for(let i = 0 ; i < e.data.num; i++){
		result += i;
	}
	this.postMessage(result)  //发送消息
	this.close();  //自己停止自己
}

let worker = new Worker('./worker.js')
worker.postMessage({
		num:a,
})

worker.onmessage = function(e){
			console.log(e.data);  //result 的值
}