一、拖拽事件
一个元素：在拖动目标上触发事件 (源元素)
- ondrag 元素正在拖动时触发
- ondragstart 用户开始拖动元素时触发
- ondragend 用户完成元素拖动后触发
两个元素：释放目标时触发的事件:
ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop 在一个拖动过程中，释放鼠标键时触发此事件
ondrop有一个小bug，如果想使用该事件必须阻止ondragover事件的默认行为
e.dataTransfer 可以跨元素事件
设置数据：e.dataTransfer.setData(key, value)
获得数据：e.dataTransfer.getData(key)
好处：不会产生全局变量
二、音频(audio)和视频(video)
方法：
play(): 播放
pause():暂停
属性：
volume:(音量) 0~1
muted:(是否静音) 值是布尔类型
duration:(总播放时长)
currentTime:(当前的播放时间)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13 #box {
14 width: 400px;
15 height: 60px;
16 background-color: red;
17 position: relative;
18 }
19 #blue {
20 position: absolute;
21 width: 350px;
22 height: 6px;
23 background-color: blue;
24 top: 50%;
25 margin-top: -3px;
26 left: 50%;
27 margin-left: -175px;
28 }
29 #orange {
30 position: absolute;
31 height: 6px;
32 background-color: orange;
33 top: 50%;
34 margin-top: -3px;
35 left: 50%;
36 margin-left: -175px;
37 }
38 #btn {
39 width: 6px;
40 left:25px;
41 height: 30px;
42 background-color: orange;
43 position: absolute;
44 top: 50%;
45 margin-top: -15px;
46 }
47 </style>
48 </head>
49 <body>
50 <video width="400" src="mp/1.mp4" controls></video>
51 <div id="box">
52 <div id="blue"></div>
53 <div id="orange"></div>
54 <div id="btn"></div>
55 </div>
56 <button id="play">播放</button>
57 <button id="pause">暂停</button>
58 <button id="add">音量+</button>
59 <button id="reduce">音量-</button>
60 <button id="muted">静音</button>
61 <script>
62 // 封装一个函数
63 function $(selector) {
64 return document.querySelector(selector);
65 }
66 // 绑定事件
67 // 播放
68 $('#play').onclick = function() {
69 $('video').play();
70 }
71
72 // 暂停
73 $('#pause').onclick = function() {
74 $('video').pause();
75 }
76
77 // 音量+
78 $('#add').onclick = function() {
79 // console.log($('audio').volume);
80
81 $('video').volume = $('video').volume <= 0.9 ? $('video').volume + 0.1 : 1;
82 }
83
84 // 音量-
85 $('#reduce').onclick = function() {
86 $('video').volume = $('video').volume > 0.1 ? $('video').volume - 0.1 : 0;
87 }
88
89 // 静音
90 $('#muted').onclick = function() {
91 // console.log($('audio').muted);
92 this.innerHTML = this.innerHTML === '静音' ? '恢复' : '静音';
93 $('video').muted = !$('video').muted;
94 }
95
96 // 给btn绑定鼠标按下事件
97 $('#btn').onmousedown = function(e) {
98 // 获得一个坐标
99 var ox = e.clientX;
100 // 获得当前元素的left值
101 var ol = $('#btn').offsetLeft;
102 // 绑定鼠标移动事件
103 document.onmousemove = function(e) {
104 console.log(e.clientX);
105 // 获得移动的差值
106 var cx = e.clientX - ox;
107 // 获得新的left值
108 var nl = ol + cx;
109 // 边界判断
110 nl = nl > 375 ? 375 : nl;
111 nl = nl < 25 ? 25 : nl;
112 // 设置btn的left值
113 $('#btn').style.left = nl + 'px';
114 // console.log(nl);
115 // 改变orange的宽度
116 $('#orange').style.width = nl - 25 + 'px';
117 // 设置当前播放的位置
118 $('video').currentTime = (nl - 25) / 350 * $('video').duration;
119
120 }
121 }
122
123 // 鼠标抬起事件
124 document.onmouseup = function() {
125 // 取消鼠标移动事件
126 document.onmousemove = null;
127 }
128
129
130 </script>
131 </body>
132 </html>
三、Canvas(html5 提供的一个新的功能，html中只是一个标签，提供画布。真正操作canvas需要使用js)
标签自带的属性：width:宽度 height:高度
<canvas id="myCanvas" width="600" height="400"></canvas>
获取画笔: canvas.getContext(‘2d’);
baginPath() 开启路径
closePath()关闭路径
fill:填充颜色
fillStyle:设置填充颜色
坐标系（2D）:x轴和y轴：默认情况下，canvas的坐标系和网页的坐标系是一样的，默认的坐标系原点为canvas画布的左上角的点
1.1 画弧(画圆)
方法:
arc(x,y,r,start,end,boll) ;
x:圆心的x坐标
y:圆心的y坐标
r：圆的半径
start:开始的角度位置，默认为0 水平向右
deg:结束角度的角度，如果绘制圆使用 Math.PI * 2 以π的方式进行计算
bool:表示是否逆时针
1.2 绘制坐标轴
画线：lineTo
移动到某个位置：moveTo
描边:stroke
设置描边色：strokeStyle
设置字体属性：font
写字：fillText
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13 canvas {
14 border: 1px solid red;
15 display: block;
16 margin: 0 auto;
17 }
18 </style>
19 </head>
20 <body>
21 <canvas id="canvas" width="600" height="400"></canvas>
22 <script>
23 // 获得元素对象
24 var canvas = document.getElementById('canvas');
25
26 // 获得画笔对象
27 var ctx = canvas.getContext('2d');
28 // 设置描边色
29 ctx.strokeStyle = '#808080';
30
31 // // 开启路径
32 // ctx.beginPath();
33 // // 移动到0，0
34 // /*
35 // moveTo(x, y)
36 // x:要移动到的坐标的x值
37 // y:要移动到的坐标的y值
38 // */
39 // ctx.moveTo(0, 0);
40 // // 画线
41 // /*
42 // lineTo(x, y)
43 // x:要画到的坐标的x值
44 // y:要画到的坐标的y值
45 // */
46 // ctx.lineTo(600, 400);
47 // // 设置描边色
48 // ctx.strokeStyle = 'green';
49 // // 描边
50 // ctx.stroke();
51
52 // // 关闭路径
53 // ctx.closePath();
54 // /*
55 // font:设置字体的属性
56 // */
57 // ctx.font = '30px 宋体';
58 // /*
59 // fillText(content, x, y)
60 // content:要写的字
61 // x:第一个字左下角的x坐标
62 // y：第一个字左下角的y坐标
63 // */
64 // ctx.fillText('我爱你', 0, 30);
65
66 // 画x轴
67 line(5, 5, 590, 5);
68 line(580, 0, 590, 5);
69 line(580, 10, 590, 5);
70 ctx.fillText('X轴', 570, 20);
71 // 画y轴
72 line(5, 5, 5, 390);
73 line(0, 380, 5, 390);
74 line(10, 380, 5, 390);
75 ctx.fillText('Y轴', 10, 390);
76
77
78 function line(sx, sy, ex, ey) {
79 // 开启路径
80 ctx.beginPath();
81 // 移动到某点
82 ctx.moveTo(sx, sy);
83 // 画线
84 ctx.lineTo(ex, ey);
85 // 描边
86 ctx.stroke();
87 // 关闭路径
88 ctx.closePath();
89 }
90 </script>
91 </body>
92 </html>
1.3绘制矩形
描边矩形: strokeRect(sx, sy, width, height)
填充矩形:fillRect(sx, sy, width, height)
绘制矩形需要几个点： 两个点 开始的顶点， 结束时对角线的点
sx；开始点的x坐标
sy：开始点的y坐标
width:矩形的宽度
height:矩形的高度
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13 canvas {
14 display: block;
15 border: 1px solid red;
16 margin: 0 auto;
17 }
18 </style>
19 </head>
20 <body>
21 <canvas width="700" height="400"></canvas>
22 <script>
23 // 获得元素对象
24 var canvas = document.querySelector('canvas');
25
26 // 获得画笔对象
27 var ctx = canvas.getContext('2d');
28 // 绘制描边矩形
29 ctx.strokeRect(0, 0, 100, 100);
30 // 绘制填充矩形
31 ctx.fillRect(100, 100, 100, 100);
32 ctx.strokeRect(200, 200, 100, 100);
33 ctx.fillRect(300, 300, 100, 100);
34 ctx.strokeRect(400, 200, 100, 100);
35 ctx.fillRect(500, 100, 100, 100);
36 ctx.strokeRect(600, 0, 100, 100);
37 // 清除矩形
38 // ctx.clearRect(0, 0, canvas.width, canvas.height);
39 </script>
40 </body>
41 </html>