一、CSS动画
- （一）2D动画
- （二）transition过渡动画
- （三）animation动画
- （四）3D动画
二、jQuery
- （一）基础用法
- - （1）网页中的使用
  - （2）jQuery使用方法
- （二）eq和get方法
- - （1）eq()方法
  - （2）get()方法
- （三）事件
- - （1）使用事件属性
  - （2）使用事件监听器
  - （3）解绑事件
三、canvas画布
- （一）基础简介
- - (1)创建canvas标签
  - (2)给canvas标签设置 width height 属性
  - (3)通过js获取canvas标签
  - (4)通过canvas标签获取context画布上下文（画布对象）
  - (5)通过context绘制画布
- （二）绘制
- - (1)绘制矩形
  - (2)绘制文本
  - (3)绘制线
  - (4)绘制图片
四、多媒体标签
- （一）视频标签(video)
- （二）音频播放器(audio)
- （三）使用Audio类名创建
- （四）数据源标签(source)
- （五）自定义控制器
- （六）滑块
- （七）图片标签(picture)

一、CSS动画

（一）2D动画

CSS的2D转换
CSS 转换（transforms）：可以移动、旋转、缩放和倾斜元素。
平移 translate()
translate()方法是将元素从当前位置开始平移
第一个参数水平平移量右为正方向
第二个参数竖直平移量下为正方向

transform: translate(-50px, -50px);
transform: translateX(300px);
transform: translateY(200px);
transform: translateZ(50px);//translateZ：电脑屏幕向外移动

旋转 rotate()
参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180°
沿轴进行顺时针旋转为正方向，0°代表竖直向上
负数的含义其实就是 360 - 对应度数
默认旋转函数rotate 是沿着z轴进行旋转
缩放 sacle()
参数：比率 1 为原本大小
scale 写负数代表反向：
倾斜 skew()

transform: skew(30deg);
transform: skew(0deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);

matrix() 方法
matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {transform: matrix(1, -0.3, 0, 1, 0, 0);
}

transform也可以直接同时赋值多个值

.box {width: 200px;height: 200px;background-color: red;transform: translateX(100px) rotate(45deg) scale(0.5);
}

变化原点
设置transform的原点
原点的位置会影响旋转的圆心，缩放的位置
待选值: top bottom left right center 还可以填入像素值
第一个参数代表水平偏移量第二个参数代表竖直偏移量

transform-origin: right center;
transform-origin: center bottom;

当值为像素值的时候，像素值的参考位置是元素的左上角

transform-origin: 20px 70px;

（二）transition过渡动画

过渡名称
还有两个待选项
none: 无
all: 所有属性都能播放过渡动画

transition-property: left, transform;
transition-property: all;

过渡时长
动画播放的时长

transition-duration: 2s;

过渡速度
动画播放的速度曲线
待选项
linear: 匀速直线运动
ease-in: 慢进
ease-out: 慢出
ease-in-out: 慢进慢出
cubic-bezier: 曲线函数

transition-timing-function: linear;

过渡延迟

transition-delay: 3s;

合成所有属性
语法：transition: property duration timing-function delay;

transition: all 3s linear 3s;

（三）animation动画

动画帧序列

@keyframes move{//起始帧from{transfrom:translateX(0px);}//可以用百分比来代表动画的中间状态50%{transfrom:translateX(600px)}//结束帧to{transform:translateX(300px);}
}

动画属性
动画animation必须包含，名称和时长两个属性，才会进行播放

以下属性可以和transition一起记忆

动画名称：animation-name:move;
动画播放时长：animation-duration:3s;
动画播放的速度曲线：animation-timing-function:linear;
动画延迟：animation-delay:3s;

以下属性为animation独有的属性

动画迭代次数：animation-iteration-count:1; //infinite 无限次
动画播放方向：animation-direction:normal;
normal：顺向播放
reverse：反向播放
alternate：来回播放
alternate-reverse：反向来回播放
动画填充模式：animation-fill-mode:forwords
forwards：保留结束帧的状态
backwards：保留起始帧的状态
both：保留初始和结束时的值
动画播放和暂停状态：animation-play-state:
pause：暂停
running：继续

复合属性

官方顺序
duration | name
animation:2s move;
duration | timing-function | delay | name
animation:2s linear 3s move;
duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name
animation:
一般顺序（参考transition）
animation:move 3s linear 3s forwards
动画播放和暂停
动画播放和暂停状态：animation-play-state:
pause：暂停
running：继续

 btn.addEventListener('click', () => {box.style.animation = 'move 1s linear forwards infinite alternate running'})btn2.addEventListener('click', () => {// animationPlayState 动画播放状态// paused 暂停// running 播放if (box.style.animationPlayState === 'paused') {box.style.animationPlayState = 'running'} else {box.style.animationPlayState = 'paused'}})

（四）3D动画

创建一个场景
搭建3d场景，在父元素上设置：transform-style: preserve-3d;
设置透视距离

perspective: 300px;

若三维场景中不添加 perspective 则三维场景是一个正交视图
设置透视原点

perspective-origin: center center;

透视原点（灭点所在的坐标）
原点为 0 值时，所在位置是scene的左上角：perspective-origin: 0 0;
在场景里添加子元素

    <!-- 创建一个场景，用来显示三维图形 --><div class="scene"><!-- 给三维空间中添加三维元素 --><div class="box"></div></div>

在子元素上使用3d变换

transform: rotateY(65deg);

二、jQuery

（一）基础用法

（1）网页中的使用

<!DOCTYPE html>
<html><head></head><body></body><!-- 通过脚本形式进行引入 --><script src="./jquery.min.js"></script><script>// 在引入jquery后，此处就可以使用jquery的功能了</script>
</html>

（2）jQuery使用方法

1.查询并存储元素
2.操作元素，包括修改元素样式，绑定事件等

使用$()函数获取一个jQuery对象
jQuery对象的变量名，一般以$开头

let $box=$('.box')

jQuery对象看上去像一个数组，其中数组成员就是dom对象

console.log($box)

给元素修改样式

$box.css('height','100px')
$box.css('background-color','#f00')

jQuery对象的函数总是返回自己

所以可以进行链式调用

$box.css('height','100px').css('background-color','#f00').css('color','#f0f').text('hello word')

（二）eq和get方法

（1）eq()方法

eq 读取对应索引位置的jQuery对象

let $li=$lis.eq(1)

因为$li是jQuery对象，所以可以直接使用jQuery操作它

$li.css('color','#f00')

（2）get()方法

get 读取对应索引位置的dom对象

let li = $lis.get(2)
li.style.color = '#f00'

使用 [] 方括号的方式去获取索引对应的 dom 对象

其结果等价于 get 函数获取的结果

let li = $lis[2]
li.style.color = '#f00'

（三）事件

（1）使用事件属性

绑定事件
和dom对象绑定事件进行类比

    // 对应 jquery 的写法如下$btn.click(ev => {console.log('click');// ev 是jquery封装的事件对象console.log(ev);})// 再例如$btn.mousemove(ev => {console.log('mousemove');})

触发事件

    // 可以直接使用事件对应的函数去触发事件，例如:$btn.click()$btn.mousemove()

（2）使用事件监听器

绑定事件

    const handler = ev => {console.log(ev);console.log(1);}// 绑定事件$btn.on('click', handler)$btn.on('mousemove', ev => {console.log(ev);console.log(2);})

绑定一次性事件

    // 绑定一次性事件$btn.one('click', ev => {console.log(ev);console.log('one');})

（3）解绑事件

    // 解绑指定事件处理程序//$btn.off('click', handler)// 解绑所有事件处理程序$btn.off('click')

三、canvas画布

（一）基础简介

(1)创建canvas标签

<canvas></canvas>

(2)给canvas标签设置 width height 属性

//width height 属性可以设置画布的像素大小
//width="800" 就意味着画布水平有800个真实像素
<canvas width="400" height="300"></canvas>

canvas {border: 3px solid #000;/*样式的宽高也可以设置canvas标签的大小，但不是真实的像素值而是拉伸后的大小*/width: 800px;height: 600px;
}

(3)通过js获取canvas标签

const canvas = document.querySelector('canvas')

(4)通过canvas标签获取context画布上下文（画布对象）

const ctx = canvas.getContext('2d')

(5)通过context绘制画布

//绘制一个实心矩形
ctx.fillRect(100, 50, 100, 100)

颜色修改
fillStyle 可以修改所有使用fill的函数所填充的颜色
strokeStyle 可以修改所有stroke函数的描边颜色

（二）绘制

(1)绘制矩形

实心矩形
语法：ctx.fillRect(x, y, w, h)
x：水平坐标 y：竖直坐标 (坐标原点在canvas左上角)
w：矩形宽度 h：矩形高度

//修改颜色
ctx.fillStyle = '#f00'
ctx.fillRect(50, 100, 150, 50)

镂空矩形
语法：ctx.strokeRect(x, y, w, h)
x：水平坐标 y：竖直坐标 (坐标原点在canvas左上角)
w：矩形宽度 h：矩形高度

ctx.strokeRect(300, 100, 200, 100)

清空矩形
用于清空画布

ctx.clearRect(0, 0, 800, 600)

(2)绘制文本

实心文字
语法：ctx.fillText(text, x, y, max-width)
text: 要渲染的文本
x,y: 文本渲染的坐标位置
max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度

ctx.fillText('祖国万岁!!', 200, 100, 100)
//最后一个参数可省略
ctx.fillText('祖国万岁!!', 200, 100)

镂空文字
参数和实心文本相同

ctx.strokeText('祖国万岁!!', 200, 300)

(3)绘制线

画直线
设置颜色和线宽

ctx.strokeStyle = '#ff0'
ctx.lineWidth = 15

使用beginPath开启路径（此方法的路径是非封闭的）

ctx.beginPath()

使用moveTo移动笔头，但不会记录路径上的线条

xtx.moveTo()

用线绘制一个点到下一个点

ctx.lineTo()

将路径封闭

ctx.closePath()

显示图形，将路径所包围的图形用纯色来填充

ctx.fill()

将路径用镂空线条进行填充

ctx.stroke()

画弧线

    //每画一个图形开启一次路径ctx.beginPath()ctx.moveTo(400, 400)ctx.lineTo(500, 400)// 角度转弧度的公式: rad = (PI / 180) * deg// 弧线// ctx.arc(x, y, r, start, end)// x: 圆心横坐标// y: 圆心纵坐标// r: 圆半径// start: 起始弧度 0度时的方向为水平向右 顺时针为正方向// end: 结束弧度ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)ctx.closePath()ctx.fill()// ctx.stroke()

(4)绘制图片

语法

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image: img 标签的 dom 对象
dx dy: 图片在canvas中的坐标
dWidth dHeight: 图片在canvas中的宽高
sx, sy: 参考图片源，截图的坐标
sWidth, sHeight: 截图的宽高
方式一

    const img = document.querySelector('img')const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')img.addEventListener('load', () => {// 图片加载完成后 再绘制图片// ctx.drawImage(img, 100, 100)// ctx.drawImage(img, 100, 100, 100, 100)ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);})

方式二

    const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')// 动态生成图片进行绘图let img = document.createElement('img')img.style.display = 'none'img.src = './img/heihei.png'img.addEventListener('load', ev => {// 绘图ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);// 删除图片节点img.remove()})// 插入图片到页面document.body.appendChild(img)

四、多媒体标签

（一）视频标签(video)

宽高(width height)

控制面板(controls)

静音(muted)

自动播放(autoplay)：自动播放要配合静音才能实现

媒体源(src)

预载模式(preload)

循环(loop)

海报(poster)：video特有

（二）音频播放器(audio)

由于audio和video都属于HTMLMediaElement的实例

所以audio的所有使用方法和video一样

可以通过 instanceof 来判断一个对象是否是某个类型的实例

video instanceof HTMLMediaElement

属性
宽高(width height)：没意义