HTML5新增

新增语义化标签

main

header

footer

aside

section

article

都是块级元素，无默认样式

canvas画布

画布中贝塞尔曲线和渐变的相关的知识，扩展出来会有很多

canvas基础

canvas就是一块画布，需要事先设置宽高，用JS绘制

canvas标签有默认样式，width:300px;height:150px

canvas需要手动设置width和height，否则在绘制时坐标会错乱

canvas的width和height设置最终渲染结果和window.devicePixelRatio属性（屏幕像素比，即分辨率）有关

const ctx = canvas.getContext('2d') 获取canvas的上下文，目前只有2d可传，并且是必传

ctx.lineWidth = 10设置画笔的宽度

ctx.moveTo(x,y)设置画笔的起点

ctx.lineTo(x,y)设置画线的终点

ctx.stroke()将所画的路径实际绘制出来

ctx.closePath()只有一笔画出来的才能够闭合，多笔画出来的图形将不生效

ctx.fill()将闭合的路径涂上颜色，有ctx.stroke()的效果

canvas改变坐标轴的API是对全局生效的，需要三思而后使用，如果多个图形需要使用不同的坐标轴，可以配合ctx.save()和ctx.restore()一起使用

canvas的旋转是相对为坐标轴原点来进行旋转的

ctx.translate(x,y)可以将坐标轴原点，向右移动x距离，向下移动y距离

ctx.scale(x,y)可以将x坐标轴的刻度放大x倍，将y坐标轴的刻度放大y倍

ctx.rotate(radius)可以将坐标顺时针转动radius，一般使用公式ctx.rotate(x*Math.PI/180)，x为度数

ctx.save()可以存储坐标系的平移的数据，缩放的数据，旋转的数据

ctx.restore()可以恢复之前存储的坐标系的平移的数据，缩放的数据，旋转的数据

canvas背景填充

canvas背景填充是以坐标系原点进行填充的

canvas图片背景填充

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const img = new Image(500)
img.src = 'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-1.jpg'
// img.width = '100px'
img.onload = function () {
  ctx.beginPath()
  const bg = ctx.createPattern(img, "no-repeat")
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, 200, 100)
}

canvas背景填充好像无法设置background-size，只能以原图的大小进行呈现

ctx.createPattern()，只有两个参数，只能改变background-repeat

ctx.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

canvas渐变背景填充

线性渐变

ctx.createLinearGradient()，四个参数都是必传的，而且也是以坐标系原点进行线性渐变的

辐射渐变(又称径向渐变、圆形渐变)

ctx.ceateRadialGradient(x0,y0,r0,x1,y1,r1)

辐射渐变就是从起始圆的边，向结束圆的边进行渐变

canvas阴影

ctx.shadowOffsetX后的X必须要大写，小写不生效

ctx.shadowOffsetY后的Y必须要大写，小写不生效

canvas绘制文字

ctx.strokeText是文字描边（空心字）

ctx.fillText是文字填充（实心字）

ctx.font = '30px Mircosoft Yahei'对ctx.strokeText和ctx.fillText都起作用

canvas线端样式

单条线端样式

ctx.lineCap = 'butt' // 默认。向线条的每个末端添加平直的边缘。
ctx.lineCap = 'square' // 前后加一个小方块。
ctx.lineCap = 'round' // 向线条的每个末端添加圆形线帽。

相交的两条线端的样式

ctx.lineJoin = 'miter' // 默认。创建尖角。
ctx.lineJoin = 'bevel' // 创建斜角。尖角砍掉了一节的效果。
ctx.lineJoin = 'round' // 创建圆角。

ctx.miterLimit = 5 // 防止过分尖锐

浏览器兼容性

可以使用在canvas标签中，加入文字的方式来检测客户浏览器是否支持canvas

html

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

好的习惯

在每次画线时，先执行一下beginPath()，防止循环、递归、使用计时器等时出现问题

svg矢量图

svg虽然可以配合css进行绘图，但一般而言，都是将css内置在svg中，如何优雅实现？

svg和canvas的比较

svg: 矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，使用标签和css去绘图

canvas: 适合小面积的绘图，适合动画，使用JS去绘图

svg画线与矩形

画线使用line标签

画矩形使用rect标签

将rx和ry设置得与width和height一样，可以画圆

html

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

svg画圈、椭圆、折线

画圈使用circle标签

画椭圆使用ellipse标签

画折线使用polyline标签

需要注意的是polyline默认会自动填充，此行为和polygon一致

svg画多边形和文本

画多边形使用polygon

polygon和polyline的区别在于，polygon会自动首尾相连，而polyline不会

svg透明度与线条样式

svg的stroke-width和坐标位置的关系

坐标位置控制线条的中线的位置，例如，在0 295, 500,295处画stroke-width为10的线条，会下边紧贴下边框

svg的path标签

path标签有一个d属性，其中是值和指令混合写入，以空格分隔，一般区分大小写字母

M表示moveTo

L表示lineTo

H表示height，水平方向向右移动到某个位置，相对于坐标原点

V表示vertical，垂直方向向下移动到某个位置，相对于坐标原点

h表示相对于上一次位置，水平方向向右移动到某个位置

v表示相对于上一次位置，垂直方向向下移动到某个位置

A表示arcTo，用于画圆弧，第一、二个参数是起点坐标，第三个参数是旋转角度，第四个参数是选择什么样的狐，1是大弧，0是小弧，第五个参数，1是顺时针，0是逆时针

涉及一些数学知识，知道半长轴、半短轴的长度，两个点的坐标，在一个平面上最多可能能画出两个椭圆

Z闭合路径，不区分大小写（大写小写都可以，但建议使用大写）

大写字母表示绝对位置，小写字母表示相对位置

svg使用path画弧

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <style>
    body{
      margin:0;
    }

    path{
      fill: transparent;
    }

    .path1{
      stroke: red;
    }

    .path2{
      stroke: blue;
    }

    .path3{
      stroke: orange;
    }

    .path4{
      stroke: green;
    }
  </style>
</head>
<body>
  <div id='app'>
    <svg width='500px' height='300px' style="border: 1px solid;">
      <!-- 顺时针长弧 -->
      <path class="path1" d="M 100 100 A 100 50 90 1 1 150 200"></path>
      <!-- 顺时针短弧 -->
      <path class="path2" d="M 100 100 A 100 50 90 0 1 150 200"></path>
      <!-- 逆时针长弧 -->
      <path class="path3" d="M 100 100 A 100 50 90 1 0 150 200"></path>
      <!-- 逆时针短弧 -->
      <path class="path4" d="M 100 100 A 100 50 90 0 0 150 200"></path>
    </svg>
  </div>
  <script>
    
  </script>
</body>
</html>

svg线性渐变

所有的定义都必须写在defs标签里

svg高斯模糊

html

<filter id="gaussian">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
</filter>

stdDeviation的值越大，越模糊

一般为10，可以达到比较好的模糊效果

在实际开发过程中，使用什么样的模糊方式，会由美工设计师告知，有就用，没有就找相似的用

https://www.w3school.com.cn/svg/svg_filters_intro.asp

svg虚线及简单动画

滚动的文字

svg的viewbox(比例尺、可视区)

svg一般用在在线地图上，如高德地图，图很大，放大不失真，且基本没有动画

工作中用得比较少，但不了解不行

多媒体

audio与video播放器

audio与video标签其实很像，很多属性和方法都是一样的。

不能使用audio和video默认的标签，原因是各个浏览器的样式不一样，这对于一个企业级的，要求风格统一的产品是不能接受的。

设置controls可以显示默认的控件

html

<video class="video" src="./假如.What.If...S01E04.1080p.H265-NEW字幕组.mp4" controls></video>

audio标签可以把视频当做音频来播放，可以练英语听力的

tips:
设置border: 1px solid;不设置样式，默认是黑色的，这个黑色是从html标签上继承来的，改变html根标签的color属性可以改变border的颜色

视频播放器的开始与暂停

视频播放器的时间进度

视频播放器调节倍速

视频播放器音量调节

volume

视频播放器全屏

进入全屏：videoDOM.requestFullscreen()

退出全屏：videoDOM.webkitExitFullScreen()

Object.keys(videoDOM)、Object.values(videoDOM)、Object.entries(videoDOM)均返回空数组

videoDOM无法使用for of循环Uncaught TypeError: video is not iterable

本地存储

参考

localStorage

cookie一有大小限制，大约是4K左右，IE和Chrome不一样

window.localStorage.getItem("keyName")  // 获取元素
window.localStorage.setItem("keyName")  // 获取元素

因为let和const声明的变量默认不在window上面，这是要写window的原因

基本使用

localStorage.setItem("b","isaac");//设置b为"isaac"
let b = localStorage.getItem("b");//获取b的值,为"isaac"
let a = localStorage.key(0); // 获取第0个数据项的键名，此处即为“b”
localStorage.removeItem("b");//清除b的值
localStorage.clear();//清除当前域名下的所有localstorage数据

数据结构

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，“键是唯一的”这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

过期时间

很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：

function set(key,value){
  let curtime = new Date().getTime();//获取当前时间
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp)//exp是设置的过期时间
{
  let val = localStorage.getItem(key);//获取存储的元素
  let dataobj = JSON.parse(val);//解析出json对象
  if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
  {
    console.log("expires");//提示过期
  }
  else{
    console.log("val="+dataobj.val);
  }
}

域名限制

由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。

异常处理

localstorage在目前的浏览器环境来说，还不是完全稳定的，可能会出现各种各样的bug，一定要考虑好异常处理。我个人认为localstorage只是资源本地化的一种优化手段，不能因为使用localstorage就降低了程序的可用性，那种只是在console里输出点错误信息的异常处理我是绝对反对的。localstorage的异常处理一般用try/catch来捕获/处理异常。

如何测试用户当前浏览器是否支持localstorage

目前普遍的做法是检测window.localStorage是否存在，但某些浏览器存在bug，虽然“支持”localstorage，但在实际过程中甚至可能出现无法setItem()这样的低级bug。因此我建议，可以通过在try/catch结构里set/get一个测试数据有无出现异常来判断该浏览器是否支持localstorage，当然测试完后记得删掉测试数据哦。

sessionStorage

比较

1、html5几种存储形式

本地存储（localStorage && sessionStorage）
离线缓存（application cache）
indexedDB 和 webSQL

2、localStorage && sessionStorage

过期时间：localStorage 永久存储，永不失效除非手动删除。sessionStorage 浏览器重新打开后就消失了

localstorage在浏览器的API有两个：localStorage和sessionStorage，存在于window对象中：localStorage对应window.localStorage，sessionStorage对应window.sessionStorage。 localStorage和sessionStorage的区别主要是在于其生存期。

存储的内容：数组，图片，json，样式，脚本。（只要是能序列化成字符串的内容都可以存储）。

作用域

这里的作用域指的是：如何隔离开不同页面之间的localStorage。
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

新增事件

drag api

拖动的位置是以鼠标的位置来计算的

普通拖动的时候会有拖影，无法非常精确地拖动到指定位置

浏览器问题：当ondragover触发时，ondrop会失效，因此需要阻止ondragover的默认事件

元素被拖动时会脱离原本的文档流

应用

可以实现碰撞检测，将图片拖入浏览器

全屏

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

只能通过用户操作来进入全屏状态，使用JS无法初始化进入全屏状态

element.requestFullscreen()和document.exitFullscreen()需要注意的问题

两个方法的screen的首字母都是小写的
两个方法调用的元素是不一样的
element.requestFullscreen()是有参数的，而document.exitFullscreen()是没有参数的

新增语义化标签 ​

canvas画布 ​

canvas基础 ​

canvas背景填充 ​

canvas图片背景填充 ​

canvas渐变背景填充 ​

线性渐变 ​

辐射渐变(又称径向渐变、圆形渐变) ​

canvas阴影 ​

canvas绘制文字 ​

canvas线端样式 ​

浏览器兼容性 ​

好的习惯 ​

svg矢量图 ​

svg和canvas的比较 ​

svg画线与矩形 ​

svg画圈、椭圆、折线 ​

svg画多边形和文本 ​

svg透明度与线条样式 ​

svg的path标签 ​

svg使用path画弧 ​

svg线性渐变 ​

svg高斯模糊 ​

svg虚线及简单动画 ​

svg的viewbox(比例尺、可视区) ​

多媒体 ​

audio与video播放器 ​

视频播放器的开始与暂停 ​

视频播放器的时间进度 ​

视频播放器调节倍速 ​

视频播放器音量调节 ​

视频播放器全屏 ​

本地存储 ​

localStorage ​

基本使用 ​

数据结构 ​

过期时间 ​

域名限制 ​

异常处理 ​

如何测试用户当前浏览器是否支持localstorage ​

sessionStorage ​

比较 ​

作用域 ​

新增事件 ​

drag api ​

应用 ​

全屏 ​

element.requestFullscreen()和document.exitFullscreen()需要注意的问题 ​

新增语义化标签

canvas画布

canvas基础

canvas背景填充

canvas图片背景填充

canvas渐变背景填充

线性渐变

辐射渐变(又称径向渐变、圆形渐变)

canvas阴影

canvas绘制文字

canvas线端样式

浏览器兼容性

好的习惯

svg矢量图

svg和canvas的比较

svg画线与矩形

svg画圈、椭圆、折线

svg画多边形和文本

svg透明度与线条样式

svg的path标签

svg使用path画弧

svg线性渐变

svg高斯模糊

svg虚线及简单动画

svg的viewbox(比例尺、可视区)

多媒体

audio与video播放器

视频播放器的开始与暂停

视频播放器的时间进度

视频播放器调节倍速

视频播放器音量调节

视频播放器全屏

本地存储

localStorage

基本使用

数据结构

过期时间

域名限制

异常处理

如何测试用户当前浏览器是否支持localstorage

sessionStorage

比较

作用域

新增事件

drag api

应用

全屏

element.requestFullscreen()和document.exitFullscreen()需要注意的问题