目录
- 视频空格控制
- canvas的loading动画
一、视频空格控制
1.1 回顾
-
视频的标签
<video src="视频的地址" controls autoplay multed></video>-
用js控制视频的播放和暂停：原生domapi
-
播放：play()
-
暂停：pause()
-
当前媒体是否播放状态:paused
- true:处于暂停
- false：播放中
-
1.2 空格实现播放和暂停的控制
-
原理：给body设置keyup事件，然后判断按下键是否是空格，根据视频的状态进行播放或暂停
-
判断按键的类型
- 计算机键盘每个按键都有自己的键码，并且每个键码都不一样。在键盘相关事件中，event事件对象提供了keyCode用于获取当前按键的键码。
- 键码大全：blog.csdn.net/m0_64590669…
-
代码：给body设置keyup事件，并判断按键的键码是否为32，从而实现播放和暂停
二、canvas-loading
2.1 回顾canvas
-
canvas是基于JavaScript的一种绘图技术，JavaScript在HTML5中支持canvas。JavaScript提供了大量的绘制图形的api进行使用。目的在于进行几何图形的绘制。
-
canvas主要是由两个部分构成
- 画布：是指的HTML5新标签
<canvas>，该标签充当画布的角色，即给绘图提供空间支持。 - 画笔：画笔本质是一个JavaScript对象，该对象需要画布标签通过指定api得到。画笔对象提供了大量绘制相关api用于几何图形的绘制
- 画布：是指的HTML5新标签
-
常用api
| 名称 | 说明 |
|---|---|
| canvas.getContext(‘2d’) | 画布标签的api，用于获取该画布的对应画笔对象。 |
| 画笔对象.arc() | 用于勾勒一段弧形，即一部分椭圆或园 |
| 画笔对象.lineWidth | 属性，设置画笔的线条宽度，以数字为单位 |
| 画笔对象.lineStyle | 属性，设置画笔的线条颜色，默认black |
| 画笔对象.stroke() | 将画笔已经勾勒的图形进行实际绘制。画布中有绘制痕迹。 |
| 画笔对象.clearRect() | 清除绘制痕迹。即去除已经绘制的图形cacc |
| canvas.width | 指画布的宽度 |
| canvas.height | 指画布的高度 |
2.2 loading加载动画实现
-
思路：利用画笔绘制一段弧形，并利用定时器不断改变绘制弧线的开始和结束角度，从而形成弧线在不断移动的视觉。
-
代码
<canvas width="400" height="300"></canvas> <script> //1. 获取画笔和画布 var canvas = $("canvas").get(0); //获取原生的dom标签 var ctx = canvas.getContext("2d"); //画笔对象 var start = 0; var end = Math.PI /2 ; //定时器处理 var timer = setInterval(() => { //去除之前的绘制痕迹 ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath();//开启新的路径，避免直线的出现 ctx.arc(200, 150, 30, start, end, false); // ctx.arc(200, 150, 30, start +Math.PI, end +Math.PI, false); // ctx.closePath(); ctx.lineWidth=3; ctx.strokeStyle='red'; //绘制 ctx.stroke(); //2 设置每次绘制的要添加的角度为Math.PI*0.05 start+=Math.PI *0.05; end+= Math.PI *0.05; }, 40); //关闭 setTimeout(() => { clearInterval(timer);//关闭定时器 //隐藏canvas标签 $('canvas').hide(); }, 3000); </script>
