html5

1.离线存储分为两种方式：

都是window对象的属性
  （1）客户端存储  sessionStorage   ：用于浏览器存值，关闭浏览器之后，存储的值消失，获取不到，一次性存值

给浏览器中存值的方法：sessionStorage.setItem([string]key,[string]data)  根据key值存储

读取浏览器中存的值：sessionStorage.getItem([string]ley)  根据key取值

  （2）硬盘存储  lacalStorage ：存在电脑硬盘上，数据会一直存在

给浏览器中存值的方法：sessionStorage.setItem([string]key,[string]data)  根据key值存储

读取浏览器中存的值：sessionStorage.getItem([string]ley)  根据key取值

2.json数据

Json数据类型既是对象型，又是数组型

JSON.stringify():将json类型的对象转为json类型的字符串

JSON.parse():将字符串json转化为对象json

 

 

 

1.<video>标签中定义一个标签

  在<video>标签中，controls属性：向用户显示控件，比如播放按钮等。

                   autoplay :自动播放

                   loop ：循环播放

                   muted ：静音

2.视频播放方法  ：video.play();

视频暂停方法 ：video.pause();

3. video.currentTime :视频的当前播放时间

video.duration  :视频的总播放时间，格式为总秒数

4.多媒体事件

onloadstart ：当浏览器开始加载媒介数据时运行脚本

5.获取video中的duration

使用canplay事件监听获取

Canolay:当浏览器能够开始播放指定的视频时，发生canplay事件

6.ontimeupdate事件

Ontimeupdate：当媒介改变其播放位置时运行脚本

7.兼容性

 

1.<canvas>用于图形的绘制，只是图形容器，必须使用脚本来绘制图形。

2. innerHeight和innerWidth都是window的属性

表示文档显示区域的宽高，不包括工具栏和地址栏等区域

 

Document.documentElement.Width和document.documentElement.Height

表示网页可视区域的宽和高

 

3. window.requestAnimationFrame

   requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似,setTimeout主要用途是按帧对网页进行重绘。

   设置这个API的目的是为了让各种网页动画效果（DOM动画，canvas动画，SVG动画，WebGL动画）能够有一个同意的刷新机制，从而节省系统资源，提高系统性能。改善视觉效果。代码中使用这个API，就是告诉浏览器希望之星一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，美妙最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

requestAnimationFrame在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

requestAnimationFrame使用一个回调函数作为传参数，这个回调函数会在浏览器重绘之前使用。

 

4.pop():用于删除并返回数组的最后一个元素

5. globalCompositeOperation

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

属性值：destination-out   在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。

             lighter           显示源图像 + 目标图像。

6. 生成最小值，最大值之间的随机数

7.计算两点之间的距离

Sqrt:开根号，pow：平方

根据勾股定理计算两点之间的距离

8.运行轨迹

将从初始位置到终点位置运行的轨迹以一小段一小段线条运行上去

画出目标小圆

Math.PI是180度，乘2为360度