从0开始学web-day41-HTML5-02
复习
HTML5第2天
一、HTML5
1.1 音频
音频常用API
play 播放
pause 暂停
duration 总时长
currentTime 当前时长
volume 音量（0-1之间的数）
muted 静音
1.2 视频
视频常用API
play 播放
pause 暂停
duration 总时长
currentTime 当前时长
volume 音量（0-1之间的数）
muted 静音
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 420px;
height: 50px;
background-color: pink;
overflow: hidden;
}
.container > #bar {
position: relative;
width: 400px;
height: 5px;
margin: 22.5px auto;
background-color: orange;
}
.container > #bar > #block {
position: absolute;
width: 10px;
height: 20px;
top: 50%;
margin-top: -10px;
background-color: green;
}
.container > #bar > #content {
height: 100%;
width: 0;
background-color: skyblue;
}
style>
head>
<body>
<audio src="./video/1.mp3" id="audio" controls>audio>
<button id="play">播放button>
<button id="pause">暂停button>
<button id="add">音量+button>
<button id="reduce">音量-button>
<button id="muted">静音button>
<div class="container">
<div id="bar">
<div id="block">div>
<div id="content">div>
div>
div>
<script>
// 获取元素
var audio = document.getElementById('audio');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var add = document.getElementById('add');
var reduce = document.getElementById('reduce');
var muted = document.getElementById('muted');
// 进度条相关元素
var bar = document.getElementById('bar');
var block = document.getElementById('block');
var content = document.getElementById('content');
// 监听鼠标按下行为
block.onmousedown = function(e) {
// 获取鼠标位置
var x = e.clientX;
// 获取定位置
var b_l = this.offsetLeft;
// 监听鼠标移动行为
document.onmousemove = function(e) {
// 获取鼠标移动之后的位置
var m_x = e.clientX;
// 赋值block的定位置left值 = 移动之后的鼠标位置 - 移动之前的位置 + 定位值
// 定义变量 简化书写
var result = m_x - x + b_l;
// 边界限制
if (result < 0) {
result = 0;
} else if (result >= bar.clientWidth) {
result = bar.clientWidth;
}
// 获取进度条的比列
var r = result / bar.clientWidth;
// 设置当前的时间 (用计算出来的比列值 * 总时长)
audio.currentTime = r * audio.duration;
// 赋值
block.style.left = result + 'px';
// 改变content的宽度
content.style.width = result + 'px';
}
}
// 鼠标抬起移动move事件
document.onmouseup = function() {
// 移除move事件
document.onmousemove = null;
}
// 播放
play.onclick = function() {
// 调用play方法
audio.play();
}
// 暂停
pause.onclick = function() {
audio.pause();
}
// 音量+
add.onclick = function() {
// 判断是否是最大值
if (audio.volume === 1) return;
// 让小数点右移动1位
var volume = audio.volume * 10;
volume++;
// 在设置回来
audio.volume = volume / 10;
// console.log(audio.volume);
}
// 音量-
reduce.onclick = function() {
// 判断是否是0
if (audio.volume === 0) return;
// 让小数点右移动1位
var volume = audio.volume * 10;
volume--;
// console.log(volume);
// 在设置回来
audio.volume = volume / 10;
// console.log(audio.volume);
}
// 静音
muted.onclick = function() {
// if (audio.muted) {
// muted.innerHTML = '静音';
// } else {
// muted.innerHTML = '恢复';
// }
// 简写:
muted.innerHTML = audio.muted ? '静音' : '恢复';
audio.muted = !audio.muted;
}
script>
body>
html>
1.3 拖拽
ondrag: 拖拽
当拖拽图片的虚影移动的时候加快该事件的触发频率（是一个高频事件）
ondragenter: 拖拽进入（原位置）
ondragleave: 拖拽离开（原位置）
ondragstart: 拖拽开始
ondragend: 拖拽结束
ondragover：悬浮
ondrop: 丢弃事件。
注：dargover事件中的默认行为阻止了ondrop事件，ondrop事件默认不能够执行，
所以要给一个元素添加该事件，必须要给该元素添加ondragover事件并阻止默认事件
<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>Documenttitle>
head>
<body>
<img src="./img/1.png" alt="" id="img">
<img src="./img/trash.png" alt="" id="trash">
<script>
// 获取元素
var img = document.getElementById('img');
var trash = document.getElementById('trash');
// 拖拽事件
// 当拖拽图片的虚影移动的时候加快该事件的触发频率（是一个高频事件）
img.ondrag = function() {
// console.log('drag');
}
// ondragenter: 拖拽进入（原位置） (会多次触发)
img.ondragenter = function() {
// console.log('ondragenter');
}
// ondragleave: 拖拽离开（原位置）
img.ondragleave = function() {
// console.log('ondragleave');
}
// ondragstart: 拖拽开始 (单次触发)
img.ondragstart = function() {
// console.log('ondragstart');
}
// ondragend: 拖拽结束
img.ondragend = function() {
// console.log('ondragend');
}
// ondragover：悬浮 (拖动起来之后在图片范围之后触发)
img.ondragover = function() {
// console.log('悬浮');
}
// 要给一个元素添加该事件，必须要给该元素添加ondragover事件并阻止默认行为
trash.ondragover = function(e) {
// 阻止默认行为
return false;
}
// ondrop: 丢弃事件
trash.ondrop = function() {
console.log('丢弃事件');
}
script>
body>
html>
1.4 服务器
简单来说就是可提供服务的机器（响应）
这个服务器可以租、可以买、可以下载一些模拟软件
我们选择自己搭建的Nodejs。如果想要使用Nodejs,需要下载应用程序
平时我们查看的地址栏： file:// ……
有了服务器之后的地址栏：http:// ……
nodejs运行服务器：node app.js
服务器根路径：启动node时候，所在的路径。查找文件，直接在该路径下寻找
本地服务器：localhost 相当于baidu.com
http协议服务器默认端口号：80，https协议服务器默认端口号：443，地址栏中可以省略
1.5 http
HTTP：超文本传输协议，里面规定了前端如何向后端发送请求，后端如何返回数据，前端如何接收数据
当有了服务器之后，我们可以发送http请求，来请求服务器中的资源
在很久之前，浏览器的目的只是为了渲染静态页面，此时面临一个问题：前端发送请求，后端如何接收，后端返回数据，前端如何解析。于是为了解决这些问
题，HTTP就出现了
例如：前端想要请求一张图片到服务器端，此时，要按照HTTP协议中的规定，去发送请求，后端接收请求，并在返回数据的时候，要按照HTTP协议中规定按照正
确的格式返回数据
另外，服务器可连接的数量是有限的，比如一个服务器的连接数量是10， 此时，前端发送过来一个请求，并且还是有状态的（持久连接），服务器的连接数量最
多只有10个，但是在当时浏览器只是为了渲染静态页面，所以没有必要是有状态的（持久连接），所以特意给HTTP设置为无状态（没有持久连接）
连接过程：
浏览器端发送HTTP请求，请求服务器中的资源，服务器得到响应，返回数据，断开连接
由于断开了连接，所以服务器可连接的数量远大于有状态的连接
浏览器接收数据，并渲染页面
服务器最大的作用是可以提供服务器环境
在前端很多时候要用到服务器环境
比如：事件推送，多线程，ajax、canvas相关功能都需要使用 服务器环境
1.6 多线程
js是单线程，意味着在同一时间只能做一件事情
当js在执行的时候，页面是停止渲染的状态
我们希望在js大量计算的时候阻塞当前线程
于是H5中提供了一个叫做 Worker函数，用于开辟一个额外的线程
1.7 worker
该方法用于开辟一个额外的线程。其使用方式：
1 将要大量计算的代码提取到一个js文件中
2 要初始化Worker函数
var worker = new Worker(path)
path: 要提取出来的js文件
特点： 需要服务器环境支持
当页面打开的时候直接可以看到，在额外的线程执行完毕之后，其它语句已经执行
// 使用方式:
// 1 将要大量计算的代码提取到一个js文件中
// 2 要初始化Worker函数
var worker = new Worker('./computed.js');
1.8 传递消息
postMessage
该方法用于将额外线程中的数据推送到主线程中
onmessage
该方法用于主线程接收额外的线程推送过来的信息
只能传递一个参数，多个参数可以放在数组或者对象中。
具体的数据在事件对象中的data属性中
// 1 将计算的代码提出出去到js文件中
// 2 实例化Worker函数
// 参数就是提取出来的文件路径
var wk = new Worker('./computed.js');
// wk是一个对象 对象中有一个事件方法: onmessage
// 该方法用于主线程接收额外的线程推送过来的信息
wk.onmessage = function(e) {
// console.log(111, arguments);
// 具体的数据在e.data中
console.log(e.data);
}
// 定义变量
var i = 0;
// 每隔1s推送信息
setInterval(function() {
postMessage(i++);
}, 1000);
1.9 事件推送
正常情况下只能够从浏览器端主动向服务器端发送请求，服务器端接收响应，返回数据之后，断开连接
想要从服务器端主动将信息推送到浏览器端，是无法实现的，于是H5中提供了EventSource的函数
来解决向浏览器端推送信息问题。
EventSource：该方法用于服务器端主动向浏览器端推送信息，并接收数据。
使用方式：var es = new EventSource(path)
path: 接口（向服务器端发送请求的地址）
特点：与Worker函数一样都需要服务器环境
我们通过es的onmessage事件监听服务器端返回的数据。
var es = new EventSource('/hello');
// console.log(es);
// 监听数据
es.onmessage = function(e) {
// console.log(111, e);
// console.log(e.data);
// 创建li元素
var li = document.createElement('li');
// 设置内部文本
li.innerHTML = e.data;
// 上树
list.appendChild(li);
}
二、canvas
2.1 介绍
canvas是HTML5新增的标签，用于提供画布
它的标准属性有width和height，例如（class、id这些都是通用标准属性）
width：表示canvas的宽
height: 表示canvas的高
在Javascript中，可以通过canvas.getContext(‘2d‘)方法获取画布上下文。
画布上下文为我们提供了大量的绘图方法。
canvas是用于显示图形的，自带了一个坐标系，默认与元素的定位坐标系是一致的位于左上角，是一个倒置的数学坐标系（与浏览器一样）
2.2 canvas API
在canvas中大部分都是在操作路径，所以在操作之前要开启路径
beginPath(): 用于开启路径
closePath(): 用于闭合路径。在闭合时候的点，和最开始时候的点之间会形成一条线段
fillRect(x, y, w, h)：填充矩形
x: 当前坐标系的x点 y：当前坐标系的y点
w: 矩形的宽 h：矩形的高
strokeRect(x, y, w, h)：描边矩形
x: 当前坐标系的x点 y: 当前坐标系的y点
w: 矩形的宽 h: 矩形的高
clearRect(x, y, w, h): 清除canvas上的一块区域
x: 当前坐标系的x点
y: 当前坐标系的y点
w：要清除的区域的宽
h: 要清除的区域的高
arc(x, y, r, star, end, bool)：绘制弧
x: 圆心所在的圆弧的x点
y: 圆心所在的圆弧的y点
r：表示圆弧的半径
star: 起始位置
end：终点位置
bool: 是一个布尔值，默认是false表示顺时针绘制，反之则是逆时针绘制
fill: 用于填充
stroke: 用于描边
fillStyle: 用于改变填充色
strokeStyle: 用于改变描边色
fillText: 用于绘制文字
font: 用于改变文字样式
lineWidth: 用于改变线宽
lineTo 绘制线
moveTo 移动绘制的起点
<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>Documenttitle>
<style>
canvas {
margin: 0 auto;
border: 1px solid #000;
/* 转为块元素 */
display: block;
}
style>
head>
<body>
<canvas width="800" height="600" id="myCanvas">canvas>
<script>
// 获取画布
var canvas = document.getElementById('myCanvas');
// 在js中获取画笔
var ctx = canvas.getContext('2d');
// console.log(ctx);
// 在canvas中 有一些方法可以通过一条代码即可绘制图形
// 填充矩形
// ctx.fillRect(0, 0, 100, 100);
// 描边矩形
// ctx.strokeRect(100, 100, 100, 100);
// 清除canvas中的某块区域
// ctx.clearRect(50, 50, 50, 50);
// js中的弧度 Math.PI / 180 得到1角度
// strokeStyle: 用于改变描边色
// ctx.strokeStyle = 'orange';
// 改变填充色
// ctx.fillStyle = 'skyblue';
// // 开启路径
// ctx.beginPath();
// // 最后一个参数表示顺时针还是逆时针来绘制图形 默认是false表示顺时针 反之是逆时针
// // 绘制弧
// ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
// // 闭合路径
// ctx.closePath();
// // 描边
// // ctx.stroke();
// // 填充
// ctx.fill();
// // font: 用于改变文字样式
// ctx.font = '20px 楷体';
// // lineWidth: 用于改变线宽
// ctx.lineWidth = 10;
// // 描边矩形
// ctx.strokeRect(100, 100, 100, 100);
// // fillText: 用于绘制文字方法
// ctx.fillText('标题', 300, 300);
// console.log(ctx);
// 封装一个方法用于绘制线段
function line(x, y, endX, endY) {
// 开启路径
ctx.beginPath();
// moveTo 移动绘制的起点
ctx.moveTo(x, y);
// lineTo 绘制线
ctx.lineTo(endX, endY);
// 闭合路径
ctx.closePath();
// 描边
ctx.stroke();
}
// 绘制线段
line(100, 100, 200, 200);
// 封装一个绘制圆的方法
function drawCircle(x, y, r) {
// 开启路径
ctx.beginPath();
// 最后一个参数表示顺时针还是逆时针来绘制图形 默认是false表示顺时针 反之是逆时针
// 绘制弧
ctx.arc(x, y, r, 0, Math.PI * 2);
// 闭合路径
ctx.closePath();
// 描边
ctx.stroke();
}
// 绘制圆
drawCircle(300, 300, 100);
script>
body>
html>