目录
一、progress
1.progress 表示运行中的进度
<progress></progress>（1）在HTML中放置progress标签，无内嵌属性和文本时，显示的是整个进度条被填满的状态
（2）给progress设置属性
<progess value='50' max='100'></progress>其中value是进度条在框里的进度，注意：设置value属性时，一定要设置max属性，页面才有效果
二、input输入框
1.placeholder用来描述输入字段语气值的提示信息。注意：输入字段为空时显示
输入框：<input type='text' placeholder='输入'>在鼠标点击输入框还没输入内容时，输入框会显示提示信息输入
当输入内容时，提示信息会消失
2.type的类型，可以设置为number或date类型等。注意：其兼容性较差，在火狐浏览器中没有效果，在谷歌有效果--->不推荐使用
三、音视频
1.video-->视频
属性：
（1）src需要引入的视频地址 （2）controls 是否显示视频控件
（3）autoplay 在视频就绪后马上播放 （4）muted 视频音频为静音模式
[注意：autoplay要与muted搭配使用，否则不能自动播放]
（5）loop 视频循环播放 （6）volume 视频音量 0~1
（7）duration 视频总时长 （8）currentTime 当前播放进度
（9）paused当前视频状态是否暂停 暂停true （10）width、height 视频宽高
（11）playbackRate 设置或返回视频当前的播放速度
（12）end 视频是否播放结束 结束返回true
方法：
（1）play() 播放 （2）pause() 暂停 （3）load() 重新加载当前视频
实例：利用按钮来控制视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video</title>
</head>
<body>
<!-- 设置视频 -->
<video src="./MV.mp4" autoplay muted controls loop></video><br>
<!-- 设置按钮 -->
<div id="btns">
<button>播放</button>
<button>暂停</button>
<button>快进</button>
<button>快退</button>
<button>快倍速</button>
<button>慢倍速</button>
<!-- 播放和暂停按钮合一 -->
<button>▶</button>
<button>百分比</button>
</div>
<script>
// 获取视频
var video = document.getElementsByTagName('video')[0];
// 用事件委托
var btns = document.getElementById('btns');
btns.onclick = function(event){
var target = event.target;
console.log(target.innerText);
switch(target.innerText){
case '播放':
video.play();
break;
case '暂停':
video.pause();
break;
case '快进':
video.currentTime += 10;
video.play();
break;
case '快退':
video.currentTime -= 10;
video.play();
break;
case '快倍速':
video.playbackRate *= 3;
video.play();
break;
case '慢倍速':
video.playbackRate *= 0.1;
video.play();
break;
case '▶':
// video.pause -->true暂停
if(video.paused){
video.play()
}else{
video.pause()
}
break;
case '百分比':
var current = video.currentTime;
var total = video.duration;
var bee = (current/total*100).toFixed(2);
alert(bee + '%');
break;
}
}
</script>
</body>
</html>2.audio-->音频 使用方式与video类似
四、画布-->canvas
1.canvas是专门来绘制图形的，在页面中放置一个canvas元素，相当于在页面上放置一块画布，canvas只是一个容器
2.绘制步骤
实例一：绘制矩形
（1）取得canvas对象 （2）取得2d上下文
（3）设置绘图样式，使用图形上下文对象中的fillStyle填充样式，strokeStyle边框样式
（4）指定线宽，使用图像上下文对象中的lineWidth
（5）绘制矩形，使用图像上下文对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas-矩形</title>
</head>
<body>
<!-- 设置画布 -->
<canvas height="500" width="500" style="border: 1px solid black;"></canvas>
<script>
// 获取画布对象
var canvas = document.getElementsByTagName('canvas')[0]
// 获取2d上下文
var context = canvas.getContext('2d');
// 设置填充样式-->填充和描边
context.fillStyle = 'palevioletred';
context.strokeStyle = 'pink'
// 设置边框
context.lineWidth = '2'
// 绘制矩形
// context.fillRect(x坐标，y坐标，宽度，高度)
context.fillRect(20,20,100,100);
context.strokeRect(200,200,100,100);
// 清除矩形
context.clearRect(20,20,20,20)
context.clearRect(100,20,20,20)
context.clearRect(20,100,20,20)
context.clearRect(100,100,20,20)
</script>
</body>
</html>实例二：绘制圆形
（1）取得canvas对象 （2）取得2d上下文
（3）设定绘图样式，使用图像上下文对象中的fillStyle填充 strokeStyle边框样式
（4）指定线宽 使用图像上下文对象中的lineWidth
（5）开始创建路径context.beginPath()
（6）设置路径content.arc(圆心x坐标，圆心y坐标，圆半径，开始的角度，结束的角度，绘制的方向false->顺时针)
（7）关闭路径 （8）设定绘制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas-绘制圆形</title>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid black;"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
context.fillStyle = 'palevioletred';
context.strokeStyle ='pink';
context.lineWidth = '2';
// 创建路径
context.beginPath()
// 设置路径
context.arc(200,200,100,0,Math.PI/180*360,false);
// 关闭路径
context.closePath();
// 设定绘制样式
context.fill();
context.stroke();
</script>
</body>
</html>注意：与绘制矩形的些微不同点：绘制矩形的设置绘制样式是：context.fillRect() 和context.strokeRect()；而绘制圆形的设置绘制样式是：context.fill() 和 context.stroke()
实例三：渐变色
（1）取得canvas对象 （2）获取2d上下文
（3）创建渐变对象，并添加渐变色gradiant
（4）设置填充模式 （5）绘制矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas-渐变色</title>
</head>
<body>
<canvas height="500" width="500" style="border: 1px solid black;"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
// 起始和终点座位的坐标
var gradiant = context.createLinearGradient(100,100,300,300);
gradiant.addColorStop(0,'palevioletred');
gradiant.addColorStop(0.5,'yellow');
gradiant.addColorStop(1,'pink')
context.fillStyle = gradiant;
context.fillRect(100,100,200,200)
</script>
</body>
</html>实例四：图片
（1）取得canvas对象 （2）获取2d上下文对象
（3）创建图像对象 （4）在图像加载完成后绘制图像
（5）设置平铺模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cancas-图片</title>
</head>
<body>
<canvas height="800" width="800" style="border: 1px solid black;"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0]
var context = canvas.getContext('2d');
// 创建图片对象
var image = new Image();
image.src = './12.jpg';
// 在图片加载完成后执行方法
image.onload = function(){
// 绘制图片
context.drawImage(image,10,10,100,100)
// 创建平铺对象
var pattern = context.createPattern(image,'repeat')
context.fillStyle = pattern;
context.fillRect(200,0,200,200)
}
</script>
</body>
</html>实例五：文字
（1）取得canvas对象 （2）取得2d上下文
（3）设定绘制样式 （4）指定线宽
（5）绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas-文字</title>
</head>
<body>
<canvas height="500" width="500" style="border: 1px solid pink;"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
context.fillStyle = 'pink';
context.strokeStyle = 'yellow';
context.lineWidth = '2';
//设置文字
context.font = '50px 宋体';
context.textAlign = 'center';
// 绘制文字
context.fillText('hello wan',200,100);
context.strokeText('hello su',100,200)
</script>
</body>
</html>页面预览：