H5API
HTML5 new features
Tags: nav article footer header aside.....
New form feature: input type value date time week email number
Form attribute form formaction (submission address) frommethod (submission method) required readonly disabled
Form control label: progress meter datalist
1.H5API (js part in HTML5)
Before HTML5 came out, it was necessary to display videos, audios, and animations on the Internet. In addition to using a third-party self-developed player, the most used tool was Flash, but it was necessary to install various plug-ins on the browser, and sometimes the speed very slow. HTML5 adds two new media-related tags, allowing developers to embed cross-browser audio and video content in web pages without relying on any plug-ins. These two tags are <audio> <video>
Media (audio video)
canvas
Drag
Local storage
sessionStorage
webSocket
1.1 Custom data attributes
data-id 是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力宁可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。
获取属性
document.getAttribute
$(dom).attr()
dom.dataset<script>
window.onload=function(){
var div=document.querySelector('#one');
console.log(div.dataset)
console.log(div.dataset.id)
console.log(div.dataset.item)
}
</script>
<div id="one" flag='two' data-id='1001' data-item='test'></div>1.2 Media elements
1.video
Before the video tag appeared, it was very difficult to play video or audio data on a web page. The video tag in H5 can play videos as easily as displaying pictures using img.
Video provides a lot of properties and methods, we can directly set or control the display of the video through js
Read and write attributes src autoplay poster loop constrols width height width and height are generally not used together
constrols control strip is Loop is looping AutoPlay autoplay Poster = '' covers the address discharge cover muted mute
Method play pause pause paused switch, whether it is paused volume control volume currentTime current playback seconds playbackRate multiple playback
1.属性
1.进度条controls
<video src="./音视频/1.mp4" controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4" controls autoplay> </video>
3.post封面
<video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>
4.是否循环播放loop
<video src="./音视频/1.mp4" controls loop> </video>
5.muted静音
<video src="./音视频/1.mp4" controls loop autoplay> </video>2.方法
1.播放 play
var video=$('video')[0];
if($(this).text() === '播放'){
video.play()
}
2.暂停 pause
if($(this).text()==='暂停'){
video.pause()
}
3.切换 paused 音视频是否是暂停状态
if($(this).text()==='切换'){
if(video.paused){
video.play()
}else{
video.pause()
}
}
4. // 控制音量+
if($(this).text()==='音量+'){
video.volume=(video.volume>0.9?0.9:video.volume )+0.1
}
5.if($(this).text()==='音量-'){
video.volume=(video.volume<0.1?0.1:video.volume)-0.1
}
6.// 快进
if($(this).text()==='快进'){
video.currentTime+=5
}
7.// 回退
if($(this).text()==='回退'){
video.currentTime-=5
}
8.// 倍数播放
if($(this).text()==='倍速播放'){
video.playbackRate=0.5
} 3.事件
video.onvolumechange=function(){
// console.log('音量改变事件监听')
if(this.volume===0.5){
alert('继续调高声音会损伤耳膜')
}
}2.audio audio
The audio element is similar to video and is used to play audio. Its attribute method events are almost the same as the video element.
<!-- 不加control相当于背景音乐 -->
<audio src="./音视频/1.mp3" controls loop autoplay></audio>2. Canvas
1. Grasp the basic concepts of the canvas element, learn how to place a canvas element on the page, and how to use the canvas element to draw a simple rectangle
2. Master the method of using paths, and be able to use paths to draw circles and polygons
3. Master the drawing method of gradual graphics, learn how to deform graphics, zoom in on graphics, combine graphics, and draw shadows on graphics
1.基本用法
(1)获取canvas对象--获取画布
通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)--获取画笔
图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
(3)定义填充样式
context.fillStyle='red'
(4)绘制填充图形
context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
1.实例 --绘制填充矩形
//通过fillRect
window.onload=function(){
//1.获取画布
var canvas=document.querySelector('canvas');
// 2.获取画布上下文对象
var context=canvas.getContext('2d');
// 3.绘制填充样式
context.fillStyle='red'
// 4.绘制填充矩形
context.fillRect(10,10,100,100)
}
//绘制轮廓矩形 边框矩形
window.onload=function(){
//1.获取画布
var canvas=document.querySelector('canvas');
// 2.获取画布上下文对象
var context=canvas.getContext('2d');
// 设置轮廓样式
context.strokeStyle='red'
// 设置轮廓的线宽
context.lineWidth=4;
// 绘制边框矩形或者轮廓矩形
context.strokeRect(10,10,100,100);
// 清楚一部分区域
context.clearRect(0,0,50,50);
// 清楚全部区域
context.clearRect(0,0,400,400)
}2.实例 --绘制圆
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画布上下文对象
var context=canvas.getContext('2d');
// 绘制圆直线曲线需要路径 开始路径
context.beginPath();
// 圆的路径 x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
// Math.PI --180度
context.arc(100,100,50,0,Math.PI,true);
// context.arc(100,100,50,0,Math.PI/2);
// 直线路径
context.lineTo(100,100);
context.lineTo(150,100);
context.arc(300,300,50,0,Math.PI*2);
// 结束路径
// context.closePath();
// 填充样式
context.fillStyle='red'
// 绘制填充圆
context.fill();
// 绘制轮廓
// context.stroke();
}3.实例 圆的移动
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画布上下文对象
var context=canvas.getContext('2d');
var bubble={
x:100,
y:100,
r:50,
color:'red'
};
draw(bubble);
move(bubble)
setInterval(function(){
// 清除画布
context.clearRect(0,0,600,600);
move(bubble)
},200)
// 绘制方法
function draw(bubble){
context.beginPath();
context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
context.fillStyle=bubble.color;
context.fill()
}
// 移动
function move(bubble){
bubble.x+=5;
bubble.y+=5;
draw(bubble);
}
}draw
绘制线段
moveTo(x,y):
x,y:线段的起点坐标
lineTo(x,y)
x,y:线段的终点坐标
cx.stroke();
//fill():不能使用
lineWidth=number;// 绘制线段
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
// 绘制线段
context.lineWidth=3
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.lineTo(200,10);
context.lineTo(300,100);
context.closePath();
context.strokeStyle='red'
}
变形
1.平移
translate(x,y):
x,y:将坐标原点平移单位
2.扩大(放大坐标)
scale(x,y):
x:代表的是水平方向上的放大倍数
y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值）
3.旋转
rotate(angle):
angle:旋转角度，旋转的中心点就是坐标轴的原点
默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可
4.保存和回滚
[save1,save2,save3]
save():将当前的绘画状态进行保存并存入状态栈
restore():该方法每次调用只会回滚到上一次save的状态
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
context.fillStyle='red'
// 绘制填充矩形
context.save()
context.fillRect(0,0,100,50);
// 平移
context.translate(100,100);
保存一次
context.save();
// context.fillRect(0,0,100,50);
context.scale(2,2);
context.save()
// context.fillRect(0,0,100,50);
context.rotate(Math.PI/6);
context.save()
context.fillRect(0,0,100,50);
context.restore();
context.restore();
context.restore();
context.restore();
context.fillRect(120,0,100,50)
}
绘制文本
context.font='16px blod';
fillText(str,x,y);
strokeText(str,x,y);
str:绘制文本字符串
x,y:文本的显示坐标
绘制时针
<!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>Document</title>
<script>
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
// 绘制圆盘
function clock(){
context.beginPath();
context.arc(300,300,200,0,Math.PI*2);
context.fillStyle='pink'
context.fill();
context.closePath();
// 绘制时刻度
for(i=0;i<12;i++){
context.save();
context.translate(300,300);
context.rotate(i*(Math.PI/6))
context.beginPath();
context.moveTo(0,-180);
context.lineTo(0,-200);
context.closePath();
context.lineWidth=4;
context.fillStyle='black';
context.rotate(Math.PI/6);
context.font='16px bold'
context.fillText(i+1,-5,-220)
context.stroke();
context.restore();
}
// 绘制分刻度
for(i=0;i<60;i++){
context.save();
context.translate(300,300);
context.beginPath();
context.rotate(i*(Math.PI/30))
context.moveTo(0,-190);
context.lineTo(0,-200);
context.stroke();
context.closePath();
context.restore();
}
// 获取当前时间
var today=new Date();
var hour=today.getHours();
var min=today.getMinutes();
var sec=today.getSeconds();
//
hour=hour+min/60;
// 绘制时针
context.lineWidth=4
context.save();
context.translate(300,300);
context.rotate(hour*Math.PI/3);
context.beginPath();
context.moveTo(0,10)
context.lineTo(0,-100);
context.stroke()
context.closePath();
context.restore();
// 绘制分针
context.lineWidth=3
context.save();
context.translate(300,300);
context.rotate(min*(Math.PI/30));
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-160);
context.stroke()
context.closePath();
context.restore();
// 绘制秒针
context.lineWidth=2
context.save();
context.translate(300,300);
context.rotate(sec*Math.PI/30);
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-180);
context.strokeStyle='red'
context.stroke()
context.closePath();
context.restore();
// 绘制交叉处
context.lineWidth=1
context.save();
context.translate(300,300);
context.beginPath();
context.arc(0,0,5,0,Math.PI*2);
context.fill();
context.fillStyle='#ccc'
context.strokeStyle='red'
context.stroke()
context.closePath();
context.restore();
}
setInterval(clock,1000)
clock()
}
</script>
</head>
<body>
<canvas width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>绘制图像
window.onload=function(){
// 获取画笔
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
// 创建img节点 绘制图片到画布中，图片dom节点，img节点绘制或者创建img节点
var img=new Image();
img.src='./2.jpg';
img.onload=function(){
// 绘制图片到画布中 从0,0点开始绘制图片，绘制一个200*200的图片
context.drawImage(img,0,0,200,200);
}
} 绘制视频
window.onload=function(){
// 获取画笔
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
var video=document.querySelector('video');
draw()
function draw(){
context.drawImage(video,0,0,200,200);
// 请求动画帧
requestAnimationFrame(draw)
}
}Drag
1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
dragstart->drag->dragenter->dragover->drop->dragend
-----------------------------------------------------------------------
2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid rgb(94, 68, 211);
float: left;
margin: 10px;
}
body {
height: 400px;
}
</style>
<script>
window.onload = function () {
var parent = document.querySelector('.parent')
var childs = document.querySelectorAll('.child')
// console.log(childs); 是类数组
//转化成数组
childs = Array.from(childs)
// console.log(childs);
//每个child都有留个事件，所以用forEach来弄，减少代码冗余
childs.forEach(function (item, idex) {
// 开始拖放
item.ondragstart = function (event) {
console.log('ondragstart开始拖放');
console.log('event是', event);
event.dataTransfer.setData('id', item.id);
};
// 正在拖放
item.ondrag = function () {
console.log('ondrag正在拖放');
}
// 拖放结束
item.ondragend = function () {
console.log('ondragend拖放结束');
}
});
//parent放置事件 进入目标元素
parent.ondragenter = function () {
console.log('ondragenter进入目标元素');
}
//在放置对象中拖放
parent.ondragover = function (event) {
//取消事件默认行为 // 设置目标元素可放置
event.preventDefault();
console.log('ondragover在放置对象中拖放');
}
//将拖拽对象拖放到放置对象中
parent.ondrop = function () {
console.log('ondrop将拖拽对象拖放到放置对象中');
//id 获取child节点id 也就是one
// 获取数据传输对象内的数据，通过数据获取节点，放置节点
var id = event.dataTransfer.getData('id')
//选择dom节点 id="one"
var dom = document.querySelector('#' + id)
//追加节点
this.appendChild(dom)
//因为子元素的事件触发会触发父元素的触发事件
//阻止事件冒泡
event.stopPropagation();
}
//往body中拖放对象
document.body.ondragover = function (event) {
//取消事件默认行为 因为默认不给body放置对象的
event.preventDefault()
}
//
document.body.ondrop = function (event) {
//id 获取child节点id 也就是one
// 获取数据传输对象内的数据，通过数据获取节点，放置节点
var id = event.dataTransfer.getData('id')
// 因为id 是变量 要获取四个不同的dom节点 所以用拼接的形式
var dom = document.querySelector('#' + id)
//追加节点 this指的是body
this.appendChild(dom)
}
}
</script>
</head>
<body>
<div class="parent"></div>
<!-- draggable 属性规定元素是否可拖动-->
<div class="child" id="one" draggable="true">1</div>
<div class="child" id="two" draggable="true">2</div>
<div class="child" id="three" draggable="true">3</div>
<div class="child" id="four" draggable="true">4</div>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。