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.画线画矩形
css{
stroke:colorname;
stroke-width:线宽
}
不填充：fill:transparent
3.画圆画椭圆折线
4.多边形文字
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 的值
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
