十四、HTML5 详细版

郁子大约 15 分钟约 4384 字

（一）input 的新增 type

基本都有兼容性问题，不建议使用

1.placeholder

<input type="text" placeholder="手机/邮箱/用户名" />

2.Calendar 类

1）日期选择器

Chrome 支持
Safari、IE 不支持

<input type="date" />

2）时间选择器

<input type="time" />

3）周选择器

<input type="week" />

4）日期时间选择器

<input type="datetime-local" />

3.number

Chrome 支持
Safari、IE 不支持

<input type="number" />

4.email

Chrome、Firefox 支持
Safari、IE 不支持

<input type="email" />

5.color

Chrome 支持
Safari、IE 不支持

<input type="color" />

6.range

Chrome、Safari 支持
Firefox、IE 不支持

<input name="range" type="range" min="0" max="100" />

7.search

Chrome 支持、Safari 支持一点（再次聚焦时只有完整输入上次搜索词才有下拉框提示）
IE 不支持
提交后再次聚焦有下拉框，显示上次搜索词

<input name="search" type="search" />

8.url

Chrome、Firefox 支持
Safari、IE 不支持
必须填写完整的网址（带协议头 http[s]://、 ftp://）

<input type="url" />

（二）contenteditable

没有兼容性问题，可以使用
该属性可继承、子级可覆盖

<div contenteditable>Panda</div>
<div contenteditable="true">Panda</div>
<div contenteditable="false">Panda</div>

（三）Drag 拖拽

Chrome、Safari 支持
Firefox 不支持

<div draggable></div>
<div draggable="true"></div>
<div draggable="false"></div>

1.默认值

一般标签默认 false，不可拖拽
a、img 标签默认 true，可拖拽

2.拖拽的组成和生命周期

组成：
- 被拖拽的元素
- 目标区域（目标元素）
生命周期：自按下鼠标聚焦元素开始，到松开鼠标元素失焦结束

1）拖拽开始（被拖拽元素）

事件 API：ondragstart
按下鼠标聚焦元素的一瞬间是不会触发事件的
稍微移动一点点才会触发

document.querySelector("div").ondragstart = function (e) {
  console.log(e);
};

2）拖拽进行中（被拖拽元素）

事件 API：ondrag
移动元素时触发

document.querySelector("div").ondrag = function (e) {
  console.log(e);
};

3）拖拽结束（被拖拽元素）

事件 API：ondragend
松开鼠标元素失焦的一瞬间触发

document.querySelector("div").ondragend = function (e) {
  console.log(e);
};

4）拖拽元素进入（目标元素）

事件 API：ondragenter
拖拽元素的鼠标进入目标元素才触发，不是图形进入触发
- 实现图形进入触发需要计算鼠标到图形的距离

document.querySelector("div").ondragenter = function (e) {
  console.log(e);
};

5）拖拽元素在内部移动（目标元素）

事件 API：ondragover
拖拽元素的鼠标在目标元素内部移动时触发

document.querySelector("div").ondragover = function (e) {
  console.log(e);
};

6）拖拽元素离开（目标元素）

事件 API：ondragleave
松开鼠标元素失焦的一瞬间触发

document.querySelector("div").ondragleave = function (e) {
  console.log(e);
};

7）拖拽元素被松开（目标元素）

事件 API：ondrop
所有的标签元素，当拖拽周期结束时，默认事件是回到原处，不执行此函数
需要在 ondragover 中阻止默认事件，则会先执行 drop 后执行 end
- 事件是由行为触发的，但是一个行为可以触发多个事件
- ondragover 有两个逻辑：回到原处和执行 ondrop 事件
  - 但是默认回到原处

document.querySelector("div").ondragover = function (e) {
  e.preventDefault();
};
document.querySelector("div").ondrop = function (e) {
  console.log(e);
};

事件的调用链（责任链模式）

如果自定义事件 A 触发后，自定义事件 B 触发，自定义事件 B 触发后，默认事件 C 触发（即：A -> B -> C）

则要想阻止默认事件 C，必须在事件 B 中阻止默认事件

3.DataTransfer 属性

兼容性极差，了解即可

1）`effectAllowed`

用于拖拽时控制鼠标指针的变化
- link、copy、move、copyMove、linkMove、all
必须写在 ondragstart 事件中

document.querySelector("div").ondragstart = function (e) {
  console.log(e);
  e.dataTransfer.effectAllowed = "link";
};

2）`dropEffect`

用于松开拖拽时控制鼠标指针的变化
- link、copy、move、copyMove、linkMove、all
必须写在 ondrop 事件中

document.querySelector("div").ondrop = function (e) {
  console.log(e);
  e.dataTransfer.dropEffect = "link";
};

（四）语义化标签

只是名字不同，本质还是 div
但是有利于 SEO

1.header

表示页面头部区域

表示页面底部区域

3.nav

表示导航栏区域

4.article

表示一篇文章
可以直接被引用拿走的部分
常用于博客类文章详情（一个页面从上到下都是文章内容）

5.section

表示文章的一个章节
页面中的某个部分的段落文本

6.aside

表示页面侧边栏区域
常用于后台管理系统

（五）Canvas 画布

1.准备工作

1）生成一块画布区域

需要设定宽高，坐标原点才会在元素左上角
使用 JS 操作

<canvas id="can" width="500px" height="300px"></canvas>

2）获取 canvas 对象

let canvas = document.querySelector("#can");

3）获取内容区对象（画笔）

创建 2d 画布

let ctx = canvas.getContext("2d");

4）开始路径（规范）

养成习惯，每次绘制前都先声明

ctx.beginPath();

2.画线

起点坐标、终点坐标

1）规划路径

lineWidth 一旦设置就会作用于当前路径（一笔画）
- 如果需要不同线段不同粗细，新开一条路径即可
closePath 针对的是每一条路径
- 新路径闭合不会回到上一个路径的起点，而是当前路径的起点

// 选择起点
ctx.moveTo(100, 100);
// 绘制一条线
ctx.lineTo(200, 100);
// 绘制拐点
ctx.lineTo(200, 200);
// 闭合路径
ctx.closePath();
// 设置全路径线段粗细
ctx.lineWidth = 10;
// 填充
ctx.fill();

2）绘制路径

ctx.stroke();

3）新开一条路径

ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(200, 100);
ctx.lineTo(200, 200);
ctx.stroke();

3.画矩形

四条边

1）方法一：画四条线

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.stroke();

2）方法二：rect()

x 坐标、y 坐标、宽度、高度

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.rect(100, 100, 200, 100);
ctx.fill();
ctx.stroke();

3）方法三：strokeRect()、fillRect()

x 坐标、y 坐标、宽度、高度

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
// ctx.strokeRect(100, 100, 200, 100);
ctx.fillRect(100, 100, 200, 100);

4）清空矩形

clearRect(x 坐标、y 坐标、宽度、高度)
可以设置为画布大小，则在每次循环中可实现清空画布的操作

4.画圆

圆心坐标、半径、起始弧度、结束弧度、顺逆时针方向

1）小圆弧

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.arc(100, 100, 50, 0, Math.PI / 2, 0);
ctx.stroke();

2）大圆弧

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.arc(100, 100, 50, 0, Math.PI / 2, 1);
ctx.stroke();

3）圆

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.arc(100, 100, 50, 0, Math.PI * 2, 0);
ctx.stroke();

4）饼图

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.arc(100, 100, 50, 0, Math.PI * 1.5, 0);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

5.画圆角矩形

边的起点 A
arcTo：拐角点 B，弧延伸方向点 C，圆角大小
C 点只是提供一个方向，长度由下一条边确定

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
// ctx.moveTo(100, 100);/* 最后一条边圆角闭合后会多出来一截，应该把起始点坐标往下移 */
ctx.moveTo(100, 110);
ctx.arcTo(100, 200, 200, 200, 10);
ctx.arcTo(200, 200, 200, 100, 10);
ctx.arcTo(200, 100, 100, 100, 10);
ctx.arcTo(100, 100, 100, 200, 10);
ctx.stroke();

6.画贝塞尔曲线

1）二次贝塞尔曲线

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(200, 200, 300, 100);
ctx.stroke();

2）三次贝塞尔曲线

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(200, 200, 300, 100, 400, 200);
ctx.stroke();

7.坐标平移、旋转与缩放

都是对全局起作用，不针对某一个路径

1）平移

平移的是画布的坐标系，即将坐标原点平移到自定义坐标

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.translate(100, 100);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.stroke();

2）旋转

参数是弧度，不是角度
基于画布原点坐标进行旋转

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rotate(Math.PI / 6);
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.stroke();

3）缩放

缩放的是坐标系的刻度

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.scale(2, 2);
ctx.strokeRect(100, 100, 100, 100);

8.save 和 restore

1）save

存储当前的坐标平移、旋转和缩放数据

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");

ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);

ctx.beginPath();
ctx.strokeRect(0, 0, 100, 50);

ctx.beginPath();
ctx.stokeRect(200, 0, 100, 50);

2）restore

恢复当前的坐标平移、旋转和缩放数据至 save 调用时的状态

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");

ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);

ctx.beginPath();
ctx.strokeRect(0, 0, 100, 50);

ctx.beginPath();
ctx.restore();
ctx.stokeRect(200, 0, 100, 50);

9.背景填充

1）填充颜色

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 200, 100);

2）填充图片

需先定义一个 Image 对象
Image 的 src 属性是异步加载的，所以填充操作需要在 onload 事件中进行
从坐标系原点开始填充，所以需要先平移

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = "./src/img.png";
img.onload = function () {
  ctx.beginPath();
  ctx.translate(100, 100);
  let bg = ctx.createPattern(img, "no-repeat");
  ctx.fillStyle = bg;
  ctx.fillRect(100, 100, 200, 100);
};

3）线性渐变

createLinearGradient 参数为坐标 1、坐标 2
从坐标系原点开始填充，所以需要先平移
addColorStop() 定义的是关键帧，数值范围是 [0, 1]

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
let bg = ctx.createLinearGradient(0, 0, 200, 0);
bg.addColorStop(0, "white");
bg.addColorStop(0.5, "blue");
bg.addColorStop(1, "black");
ctx.fillStyle = bg;
ctx.translate(100, 100);
ctx.fillRect(0, 0, 200, 200);

4）辐射渐变

createRadialGradient 参数为起始圆（坐标 1、短半径）、结束圆（坐标 2、长半径）
- 默认：从起始圆的边到结束圆的边渐变
- 两圆的不同位置关系会有不同的渐变
从坐标系原点开始填充，所以需要先平移
addColorStop() 定义的是关键帧，数值范围是 [0, 1]

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
let bg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
bg.addColorStop(0, "red");
bg.addColorStop(0.5, "green");
bg.addColorStop(1, "blue");
ctx.fillStyle = bg;
ctx.translate(100, 100);
ctx.fillRect(0, 0, 200, 200);

10.阴影

shadowColor ：阴影颜色
shadowBlur ：阴影大小（扩散范围）
shadowOffsetX ：阴影 X 轴偏移量，默认左右平均分布在边框两侧
shadowOffsetY ：阴影 Y 轴偏移量，默认上下平均分布在边框两侧

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.shadowColor = "blue";
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.strokeRect(0, 0, 200, 200);

11.渲染文字

fillText ：填充文本（实心），和正常网页上的文本一致
strokeText ：描边文本（空心），只有字体边框线

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeRect(0, 0, 200, 200);

ctx.fillStyle = "red";
ctx.fillText("Monkey", 200, 200);

ctx.font = "30px Georgia";
ctx.strokeText("Panda", 200, 100);

12.线端样式

1）端点

butt ：默认，两端无附加物（直角端点）
square ：两端各加一个矩形，会使线段变长（直角端点）
round ：两端各加一个半圆，会使线段变长（圆角端点）

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineCap = "round";
ctx.stroke();

2）拐点

miter ：尖锐锐角拐点
- miterLimit ：设置拐角（miter）超过多长就自动截断（bevel）
round ：圆角拐点
bevel ：默认锐角拐点的基础上切掉尖角

let canvas = document.querySelector("#can");
let ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(100, 150);
ctx.lineJoin = "miter";
ctx.miterLimit = 10;
ctx.stroke();

（六）SVG 矢量图

SVG
- 矢量图，放大不会失真
- 适合大面积的贴图
- 通常动画较少或者较简单
- 通过标签和 CSS 实现
Canvas
- 适合小面积的绘图
- 非常适合动画，都通过 JS 操作实现，方便计算

1.画线与矩形

1）线

起点坐标、终点坐标

<svg width="500px" height="300px" style="border: 1px solid">
  <line x1="100" y1="100" x2="200" y2="100"></line>
  <line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
</svg>

line {
  stroke: #000;
  stroke-width: 3px;
}
.line2 {
  stroke: #f00;
}

2）矩形

所有封闭图形默认填充黑色
宽度、高度、起点坐标、x 方向圆角大小、y 方向圆角大小

<svg width="500px" height="300px" style="border: 1px solid">
  <rect width="100" height="50" x="0" y="0" rx="10" ry="20"></rect>
</svg>

2.画圈、椭圆、折线

1）圈/圆

半径、圆心坐标

<svg width="500px" height="300px" style="border: 1px solid">
  <circle r="50" cx="50" cy="200"></circle>
</svg>

2）椭圆

横向半径、纵向半径、圆心坐标

<svg width="500px" height="300px" style="border: 1px solid">
  <ellipse rx="100" ry="30" cx="400" cy="200"></ellipse>
</svg>

3）折线

多个拐点的坐标，逗号隔开
默认填充，图形显示不完全

<svg width="500px" height="300px" style="border: 1px solid">
  <polyline points="0 0, 50 50, 50 100, 100 100, 100 50"></polyline>
</svg>

polyline {
  fill: transparent;
  stroke: blue;
}

3.画多边形和文本

1）多边形

默认填充，但会自动闭合图形

<svg width="500px" height="300px" style="border: 1px solid">
  <polygon points="0 0, 50 50, 50 100, 100 100, 100 50"></polygon>
</svg>

polyline {
  fill: transparent;
  stroke: blue;
}

2）文本

文字出现的起始点坐标
stroke 用于加粗

<svg width="500px" height="300px" style="border: 1px solid">
  <text x="300" y="50">邓哥身体好</text>
</svg>

text {
  stroke: blue;
  stroke-width: 3px;
}

4.透明度与线条样式

1）透明度

stroke-opacity ：描边透明度
fill-opacity ：填充透明度

polygon {
  stroke: blue;
  stroke-width: 3px;
  stroke-opacity: 0.5;
  fill-opacity: 0.3;
}

2）线条样式

stroke-linecap ：边框线的线端样式
stroke-linejoin ：边框线拐点的样式

polygon {
  stroke: blue;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

5.Path 路径

1）基础属性

大写字母：表示绝对位置
小写字母：表示相对位置
M ：moveTo
L ：lineTo，连线到指定的点坐标（基于原点）
- 原：(100, 100) + 指定：(100, 150) => 现：(100, 150)
- l：连线到平移指定距离后的点坐标（基于当前坐标）
  - 原：(100, 100) + 指定：(100, 150) => 现：(200, 250)
H ：水平方向平移后的点坐标（x 轴）
- h：水平方向平移的距离
V ：垂直方向平移后的点坐标（y 轴）
- v：垂直方向平移的距离
Z/z ：闭合当前路径，不区分大小写

<svg width="500px" height="300px" style="border: 1px solid">
  <path d="M 100 100 L 200 100 l 100 100"></path>
  <path d="M 100 100 H 200 V 200"></path>
  <path d="M 100 100 H 200 V 200 Z"></path>
  <path d="M 100 100 h 200 v 200"></path>
</svg>

2）圆弧属性

参考链接：在物理引擎中画圆弧open in new window

平面内两个点和两个半径，可以确定两个圆
A ：arcTo

<!--
  M 100 100 A   100    50         0         1             1        150 200
      起点     x轴半径  y轴半径   旋转角度  小弧0/大弧1   逆时针0/顺时针1   终点
-->
<svg width="500px" height="300px" style="border: 1px solid">
  <path d="M 100 100 A 100 50 0 1 1 150 200"></path>
</svg>

6.线性渐变

渐变开始的点坐标、渐变结束的点坐标

<svg width="500px" height="300px" style="border: 1px solid">
  <!-- 定义一个从上到下的线性渐变 -->
  <defs>
    <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">
      <!-- 渐变关键帧颜色（从黄到红） -->
      <stop offset="0%" style="stop-color: rgb(255, 255, 0)"></stop>
      <stop offset="100%" style="stop-color: rgb(255, 0, 0)"></stop>
    </linearGradient>
  </defs>
  <!-- 使用线性渐变 -->
  <rect x="100" y="100" width="200" height="100" style="fill: url(#bg1)"></rect>
</svg>

7.高斯模糊

也叫高斯滤镜
每一个点和相邻点的颜色值求均值，则每个点颜色都往相邻点偏移一点，效果即模糊
stdDeviation ：模糊系数

<svg width="500px" height="300px" style="border: 1px solid">
  <!-- 定义一个从上到下的线性渐变、高斯模糊 -->
  <defs>
    <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">
      <!-- 渐变关键帧颜色（从黄到红） -->
      <stop offset="0%" style="stop-color: rgb(255, 255, 0)"></stop>
      <stop offset="100%" style="stop-color: rgb(255, 0, 0)"></stop>
    </linearGradient>
    <filter id="gaussian">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20"></feGaussianBlur>
    </filter>
  </defs>
  <!-- 使用高斯滤镜 -->
  <rect x="100" y="100" width="200" height="100" style="fill: url(#bg1); filter: url(#gaussian)"></rect>
</svg>

8.虚线及简单动画

1）虚线

stroke-dasharray
- 只有一个参数时，线段和间隔长度一致
- 多个参数（数组）时，线段和间隔长度依次对应参数，周期重复
stroke-dashoffset
- 线段整体往左侧的偏移量

<svg width="1000px" height="300px" style="border: 1px solid">
  <line x1="100" y1="100" x2="800" y2="100" class="line1"></line>
  <line x1="100" y1="100" x2="800" y2="100" class="line2"></line>
  <line x1="100" y1="100" x2="800" y2="100" class="line3"></line>
</svg>

line {
  stroke: #000;
  stroke-width: 3px;
}
.line1 {
  stroke-dasharray: 10px;
  stroke-dashoffset: 15px;
}
.line2 {
  stroke-dasharray: 10px 30px;
}
.line3 {
  stroke-dasharray: 10px 30px 50px;
}

2）简单动画

stroke-dasharray
- 线段和间隔长度都等于线段可见区域长度
stroke-dashoffset
- 偏移量从线段长度减少至 0 ，效果即填充线段往左侧逐渐缩短

<svg width="500px" height="300px" style="border: 1px solid">
  <line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
</svg>

line {
  stroke: #000;
  stroke-width: 3px;
  stroke-dasharray: 200px;
  stroke-dashoffset: 0px;
  animation: move 2s linear infinite alternate-reverse;
}
@keframes move {
  from {
    stroke-dashoffset: 200px;
  }
  to {
    sroke-dashoffset: 0px;
  }
}

9.viewBox 比例尺/可视区

SVG 常用于地图绘制
起始点坐标、比例尺比例
- 相当于 250 的宽度等价于定义的 500px，所以其他尺寸都要按比例放大 2 倍

<svg width="500px" height="300px" viewBox="0, 0, 250, 150" style="border: 1px solid">
  <rect height="50" width="100" x="0" y="0" rx="10"></rect>
</svg>

（七）播放器

1.audio

只写 src 属性页面不会展示任何内容
要显示原生控制条，需要加 controls
- 各浏览器的原生控制条样式各不相同，所以一般不加，自己编写样式后调用 API 实现功能

<audio src="" controls></audio>

2.video

视频有内容，可以直接展示在页面上
要显示原生控制条，需要加 controls
- 各浏览器的原生控制条样式各不相同，所以一般不加，自己编写样式后调用 API 实现功能

<video src="" controls></video>

3.基本 API

1）属性

属性	说明
paused	是否处于暂停状态
duration	总时长（时间戳）
currentTime	播放到哪个时间点（时间戳）
playbackRate	播放倍速
volume	播放音量（取值范围 `[0, 1]`）

2）API

API	说明
loadeddata	网页加载后，视频资源加载完毕的事件（常用于初始化视频区域）
play()	播放
pause()	暂停
document.documentElement.requestFullscreen()	请求网页全屏，视频容器宽高需要通过 JS 绑定 `100%`

十四、HTML5 详细版

# （一）input 的新增 type

# 1.placeholder

# 2.Calendar 类

# 1）日期选择器

# 2）时间选择器

# 3）周选择器

# 4）日期时间选择器

# 3.number

# 4.email

# 5.color

# 6.range

# 7.search

# 8.url

# （二）contenteditable

# （三）Drag 拖拽

# 1.默认值

# 2.拖拽的组成和生命周期

# 1）拖拽开始（被拖拽元素）

# 2）拖拽进行中（被拖拽元素）

# 3）拖拽结束（被拖拽元素）

# 4）拖拽元素进入（目标元素）

# 5）拖拽元素在内部移动（目标元素）

# 6）拖拽元素离开（目标元素）

# 7）拖拽元素被松开（目标元素）

# 3.DataTransfer 属性

# 1）effectAllowed

# 2）dropEffect

# （四）语义化标签

# 1.header

# 2.footer

# 3.nav

# 4.article

# 5.section

# 6.aside

# （五）Canvas 画布

# 1.准备工作

# 1）生成一块画布区域

# 2）获取 canvas 对象

# 3）获取内容区对象（画笔）

# 4）开始路径（规范）

# 2.画线

# 1）规划路径

# 2）绘制路径

# 3）新开一条路径

# 3.画矩形

# 1）方法一：画四条线

# 2）方法二：rect()

# 3）方法三：strokeRect()、fillRect()

# 4）清空矩形

# 4.画圆

# 1）小圆弧

# 2）大圆弧

# 3）圆

# 4）饼图

# 5.画圆角矩形

# 6.画贝塞尔曲线

# 1）二次贝塞尔曲线

# 2）三次贝塞尔曲线

# 7.坐标平移、旋转与缩放

# 1）平移

# 2）旋转

# 3）缩放

# 8.save 和 restore

# 1）save

# 2）restore

# 9.背景填充

# 1）填充颜色

# 2）填充图片

# 3）线性渐变

# 4）辐射渐变

# 10.阴影

# 11.渲染文字

# 12.线端样式

# 1）端点

# 2）拐点

# （六）SVG 矢量图

# 1.画线与矩形

# 1）线

# 2）矩形

（一）input 的新增 type

1.placeholder

2.Calendar 类

1）日期选择器

2）时间选择器

3）周选择器

4）日期时间选择器

3.number

4.email

5.color

6.range

7.search

8.url

（二）contenteditable

（三）Drag 拖拽

1.默认值

2.拖拽的组成和生命周期

1）拖拽开始（被拖拽元素）

2）拖拽进行中（被拖拽元素）

3）拖拽结束（被拖拽元素）

4）拖拽元素进入（目标元素）

5）拖拽元素在内部移动（目标元素）

6）拖拽元素离开（目标元素）

7）拖拽元素被松开（目标元素）

3.DataTransfer 属性

1）`effectAllowed`

2）`dropEffect`

（四）语义化标签

1.header

2.footer

3.nav

4.article

5.section

6.aside

（五）Canvas 画布

1.准备工作

1）生成一块画布区域

2）获取 canvas 对象

3）获取内容区对象（画笔）

4）开始路径（规范）

2.画线

1）规划路径

2）绘制路径

3）新开一条路径

3.画矩形

1）方法一：画四条线

2）方法二：rect()

3）方法三：strokeRect()、fillRect()

4）清空矩形

4.画圆

1）小圆弧

2）大圆弧

3）圆

4）饼图

5.画圆角矩形

6.画贝塞尔曲线

1）二次贝塞尔曲线

2）三次贝塞尔曲线

7.坐标平移、旋转与缩放

1）平移

2）旋转

3）缩放

8.save 和 restore

1）save

2）restore

9.背景填充

1）填充颜色

2）填充图片

3）线性渐变

4）辐射渐变

10.阴影

11.渲染文字

12.线端样式

1）端点

2）拐点

（六）SVG 矢量图

1.画线与矩形

1）线

2）矩形

2.画圈、椭圆、折线