H5笔记整理~

HTML5

新增属性

placeholder（文本框提示信息，无兼容性问题）

input新Type ps:基本没卵用，兼容性很不好

时间相关（不常用） 缺点：1.丑。2.兼容性很不好(基本只有Chrome支持)

• date 日期选择
• time 时间
• week 第几年第几周
• datetime-local 年月日时间组合
  

还有一些属性

• numebr 只能填数字的文本框（Chrome支持）
• email 邮箱格式（Chrome、火狐支持）
• color 颜色选择器（Chrome支持）
• range 一个可滑动的条，使用的时候填上min=“1” max=“100” ,这样就能获取到value值（Chrome、safari支持）
• search 文本框能提示以前填过值，还能点x删除已输入的内容（Chrome支持）
• url 必须是网址（Chrome、火狐支持）

contentEditable 文本可编辑 （无兼容问题）

• 默认是false
• 为true时，点击后文本会变成一个超长的文本框
• 属性可继承，父级设置了子元素可以编辑
• 一般用于table
• 不要嵌套来使用，会出现一些问题。

hahaha

draggable 拖拽（Chrome、Safari支持）

• a标签、img标签默认可拖拽

拖拽的生命周期，拖拽的组成

1.周期：拖拽开始 -》 拖拽进行中 -》 拖拽结束
2.组成：被拖拽物体，目标区域

拖拽触发事件

• dragstart 开始拖拽时触发事件
• drag 在移动时触发
• dragend 拖拽结束时触发事件
• 作用：可以时刻关注着拖拽的位置
• 可以配合js来实现拖拽松手后，位置改变
• 所有标签元素，当拖拽周期结束时，默认事件是回到原处

拖拽区域

事件

• draginner 拖拽元素进入自己区域触发（注意触发点是鼠标，不是拖拽元素边界）
• dragover 拖拽元素在自己区域内移动就不停触发
• dragleave 拖拽元素离开自己区域时触发事件
• drop 放下（拖拽元素在自己区域内松手），触发需要取消dragover默认事件e.preventDefault()

改变拖拽时的光标（基本只有chrome支持）

• e.dataTransfer.effectAllowed =“link” 推拽的时候改变鼠标样式。只能在dragstart事件中设置
• e.dataTransfer.dropEffect =“link” 推拽的时候改变鼠标样式。只能在drop事件中设置
• link、copy、move、copyMove、linkMove、all

Hidden

Context-menu

Date-Val -》 自定义属性

新增标签

语义化标签（一群语义化的div）

• header
• footer
• nav （导航）
• section（段落）
• article（文章，可以直接被引用拿走的，完整的。比如整篇文章之类）
• aside（侧边栏）

canvas（画布）

• css设置大小不是画布的大小
• 在行间样式上设置宽高才是画布的大小
• 画布方法：
• getContext(“2d”);获取内容区，相当于他的画笔
• moveTo() 一笔的起点
• lineTo() 画到哪
• stroke() 执行
• lineWidth=1px; 线条宽度，写在哪都相当于写在最前面
• fill(); 填充黑色
• beginPath(); 重新开始一条线
  
• closePath(); 闭合到开始的点,只针对一笔画的图形。
• clearRect(0,0,500,500); 橡皮擦，a,b起始位置 c,d宽高
• 开发小规范：在画线前尽量写上beginPath()，循环的时候不会出错。
  图形：

矩形

• rect(100,100,150,100) 画矩形，起始位置a,b 长宽c,d
• strokeRect(100,100,150,100) 直接生成矩形，省略stroke()这一步
• fillRect(100,100,150,100) 直接生成填充的 矩形

圆形

• arc(100, 100, 50, 0, Math.PI / 2, 0); 画圆
  1. 起始位置(a,b)，半径（c），起始弧度（d），结束弧度（e），方向（f）
  2. 弧度表示：0 = 0度， Math.PI = 180度
  3. 方向表示：0 - 顺时针，1 - 逆时针

圆角矩形

• arcTo(a,b,c,d,e) -> B(a,b),C(c,d),圆角大小(e)
• Math.PI == 180 度
• C点的x坐标主要是提供方向用
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nWQnUCTZ-1589703402800)(7DE9CF2607C245E3BE31C07AD87BFB01)]

贝塞尔曲线

• quadraticCurveTo(200,200,300,100);二次贝塞尔曲线 - 先到(200,200)点，再到(300,100)点
• bezierCurveTo(200,200,300,100,400,200);三次贝塞尔曲线 - 传三个点
• 波浪效果看demo

坐标系变换

• rotate(Math.PI); 坐标系旋转，是根据画布原点进行旋转
• translate(x,y);坐标系位置平移
• scale(2,2);坐标系缩放。横纵坐标长度乘2，坐标轴乘2，不只是画的线乘2
• save(); 保存当前状态的坐标系状态 （平移数据，缩放数据，旋转数据）
• restore(); 回复坐标系状态 -》 一般用于坐标旋转后，归正继续操作其他图形

背景填充

• fillStyle=“red”; 颜色填充
• createPattern(img, ‘no-repeat’);纹理填充。（纹理的坐标是从(0,0)开始的）

填充图片练习
 var img = new Image();
        img.src = './img.jpg';
        img.onload = function() {
            ctx.beginPath();
            ctx.save();//保存当前坐标系
            ctx.translate(100, 100)//偏移坐标用以防止图片
            var bg = ctx.createPattern(img, 'no-repeat');
            ctx.fillStyle = bg;
            ctx.fillRect(0, 0, 150, 50);
            ctx.restore();//恢复坐标系
        }

• createLinearGradient(0, 0, 200, 200);线性渐变。a,b坐标。c,d宽高。
  • addColorStop(0, “white”);
  • addColorStop(1, “black”);
  • 注意：数字只能是从零到一之间的。

填充渐变色-线性渐变
        var bg = ctx.createLinearGradient(0, 0, 200, 200);
        bg.addColorStop(0, "white");
        bg.addColorStop(1, "black");
        ctx.fillStyle = bg;
        ctx.fillRect(0, 0, 200, 200);

• createRadialGradient(x1,y1,r1,x2,y2,r2) 辐射渐变,起始圆和结束圆的坐标和半径
  • 若起始圆的半径为零，两个圆组合像圆锥形。
  • 若起始圆的半径不为零，则形状像圆柱形

1. 起始圆和结束圆坐标完全重合的情况，像一个正面的圆锥形或圆柱形
2. 起始圆在结束圆的里面且圆心不重合，像一个变形的圆锥形或圆柱形
3. 结束圆在起始圆的里面且圆心不重合，反向的圆锥形或圆柱形
4. 起始圆与结束圆相离且两个圆大小不相等，会形成一个尖
5. 起始圆与结束圆相离且两个圆大小相等，会形成一个平行带

阴影

• shadowColor = “red” 阴影颜色
• shadowBlur = 10; 阴影宽度
• shadowOffsetX/Y 阴影纵横偏移量

文字

• font=“30px 宋体”;
• strokeText(“文本”,100,100); 文字描边（空心）
• fillText(“文本”,100,100); 文字填充（实心）

线端样式

• lineCap = ”butt" 线端样式为原来样式
  • butt 原来样子
  • square 两端加一个方块
  • round 两端加加半圆
• lineJoin 两个线交撞部分样式
  • miter（默认，比较锋锐的尖）
    • miterLimit = 5; 给这个尖设置最大长度，放置尖过长
  • round 半圆
  • bevel 砍掉

svg（画布）

和canvas的区别

• 首先两个都是画图工具。
• 有各自适用的范围
  • svg：矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，用标签和css来画。
  • canvas：通常适合用于小面积的绘图，适合动画。用js来画。

基本使用

• 标签属性
  • svg：
    • width/height/style
    • viewBox = “0,0,250,150” (坐标,更改比例后的宽高) 比例尺

  • line：x1,x2,y1,y2 （线段起点坐标，终点坐标）
  • rect：height\width\x\y\rx\ry (矩形长宽，坐标，弧度)
  • circle：r\cx\cy（圆半径，坐标）
  • ellipse：rx\ry\cx\cy（半径宽高，坐标）
  • polyline：折线
    • points=“0 0,50 0,50 50”;三个点相连,默认填充内容
  • polygon：多边形，用法同上（和折线区别：多边形会将首尾相连）
  • text：x\y(坐标) 文本
• css属性
  • stroke:red; 线条（颜色红色）
  • stroke-opacity:.5;线条透明度
  • stroke-width:2px;线的宽度
  • stroke-linecap:butt;线端样式
  • stroke-linejoin:round;线段相交
  • stroke-dasharray:10px 10px…;线条虚线(a填充区宽度，b间隔宽度,再往后填参数则按照所填的宽度继续数)
  • stroke-dashaoffset:10px 线条偏移，虚线的小方块向左偏移（线条偏移，线条位置不动）
  • fill:transparent;填充（不填充图形）
  • fill-opacity:.5;填充透明度

画线

path标签:只有一个属性d,里面可传多多种类型值

• 默认填充，参数之间空格隔开即可。
• M -> moveTo 大写字母都是绝对位置
• L -> lineTo
• l -> lineTo 小写字母都是相对位置
• H -> 横着走到指定值
• V -> 竖着走到指定值
• h -> 横向移动多少距离
• v -> 竖着移动多少距离
• Z -> 闭合区间(不区分大小写)
• A hr vr deg a b x y-> 圆弧 （横向半径 纵向半径 旋转角度 选择大弧还是小弧 旋转方向[0顺1逆] 终点坐标[x,y])

使用
   

渐变 defs标签

• linearGradient 标签 线性渐变

filter标签 高斯模糊（滤镜）

• feGaussianBlur 标签
  • in=“SourceGraphic”
  • stdDeviation=“10”;模糊度

Audio（声音播放）

• 所有功能同下

Video（视频播放）

• controls 默认工具栏（通常不用）
• controls(显示组件控件)
• autoplay(自动播放)
• muted(静音播放)
• loop(循环播放)

自定义工具栏

• video.play(); 播放
• video.pause(); 暂停
• video.paused; 判断是否为暂停状态
• video.duration; 视频总时长(秒)
• video.currentTime;当前秒数
• video.playbackRate = 1;速率
• video.currentTime 当前播放的时间
• video.volume 当前音量(最大为1，默认为1)
• document.documentElement.requestFullscreen(); 文档全屏

获取地理信息geoLocation

定位（GPS）： 台式机几乎都没有GPS，笔记本绝大多数都没有GPS，智能手机几乎都有GPS

网络定位： 电脑可以通过网络进行粗略的地理定位

定位的使用：

window.navigator.geolocation.getCurrentPosition(function(position) {
            console.log("成功的回调函数")
            console.log(position)
        }, function() {
            console.log("失败的回调函数")
        })

特殊情况： 只有在https、file协议下才能使用，http协议下是不能使用的

属性值：

accuracy：准确度 
longitude：经度
latitude: 纬度

4行代码写个服务器

//server.js:

let express = require("express");

let app = new express(); //构建一个webapp对象

app.use(express.static("./page")); //设置一个静态文件路径

app.listen(10148); //监听端口号，尽量大于8000，或者等于80，（默认访问80端口）

//express 默认访问index.html
//启动： node server.js

重力感应

手机摇晃

动画优化 requestAnimationFrame

屏幕刷新的频率：60次/秒

浏览器存储 localStorage

history

核心：

history.pushState({inpVal: value}, null, "#" + value);

//url改变时触发
window.addEventListener("popstate", function(e) {e.state.inpVal}
//锚点（#）改变触发
window.addEventListener("hashchange", function(e) {}

//锚点改变两个都触发，先触发url监听

使用：

    
    
    
    



    
    搜索
    

    

worker

兼容性不太好

主页面：

worker.js文件:
//可以引入其他文件js（不能操作dom等）
importScripts("./xxx.js");
//把计算的过程放入异步中
this.onmessage = function(e) {
    var result = 0;
    for (var i = 0; i < e.data.num; i++) {
        result += i;
    }
    this.postMessage(result);
    this.close(); //自己停止
}