H5 API

1.HTML5新特性

(1)标签：nav article footer header aside...
(2)表单新特性：input type取值：date time week email number
(3)表单属性：form formaction(提交地址) formmethod(提交方式) required readonly disabled
(4)表单控件标签：progress meter datalist

1.1媒体元素

1.1.1 video

（1）在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。
（2）H5中的video标签可以向使用img显示图片一样简单去播放视频
（3）video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示
（4）读写属性 src, autoplay(自动播放), poster=“封面 放封面的地址” ,loop(循环播放),controls(控制条)，width height  宽高一般不一起设置使用
（5）方法：play()播放，pause()暂停，paused()切换 是否是暂停状态，volume()控制音量，currentTime()当前播放秒数 playbackRate()倍数播放

1.1.2 audio音频

audio元素与video类似，用来播放音频的。其属性方法事件也几乎与video元素一致。
当不加control时相当于背景音乐
<audio src="./音视频/1.mp3" controls loop autoplay></audio>

1.2 canvas

(1)掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单的矩形
(2)掌握使用路径的方法，能够利用路径绘制出圆与多边形
(3)掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法
基本用法
(1)获取canvas对象--获取画布
    通过document.getElementById()等方法取得canvas对象
(2)获取上下文--获取画布
    图形上下文是一个封装了很多绘图功能的对象，参数只能是"2d"
    var context = canvas.getContext("2d");
(3)定义填充样式
    context.fillStyle="red";
(4)绘制填充图形
    context.fillStyle(10,10,100,100);
//第一个参数是x轴开始的位置，第二个参数是y轴开始的位置，第三个参数是绘制图形的宽，第四个参数是绘制图形的高

1.2.1 绘制填充矩形(fillRect)

<body>
    <canvas width="400px" height="400px"></canvas>
</body>
<script>
    window.onload = function(){
        //1.获取canvas对象---获取画布
        var canvas = document.querySelector("canvas");
        //2.获取上下文对象---获取画布
        var context = canvas.getContext("2d");
        //3.绘制填充样式
        context.fillStyle = "red";
        //4.绘制填充矩形
        context.fillRect(10,10,100,100);
    }
</script>

1.2.2 绘制轮廓矩形/边框矩形

<body>
    <canvas width="400px" height="400px"></canvas>
</body>
<script>
    window.onload = function(){
        //1.获取canvas对象
        var canvas = document.querySelector("canvas");    
        //2.获取上下文
        var context = canvas.getContext("2d");
        //3.设置轮廓样式
        context.strokeStyle="red";
        //4.设置轮廓的线宽
        context.lineWidth = 10;
        //5.绘制边框矩形或者轮廓矩形
        context.strokeRect(0,0,100,100);
        //6.清除一部分区域
        context.clearRect(0,0,50,50);
        //7.清楚全部区域
        context.clearRect(0,0,400,400);
    }
</script>

1.2.3 绘制圆

<body>
    <canvas width="400px" height="400px"></canvas>
</body>
<script>
    window.onload = function(){
        //1.获取canvas对象
        var canvas = document.querySelector("canvas");
        //2.获取上下文
        var context = canvas.getContext("2d");
        //3.绘制圆、曲线、直线需要路径
        context.beginPath();
        //4.圆的路径 x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
        //Math.PI --180度
        context.arc(100,100,50,0,Math.PI,true);
        //context.arc(100,100,50,0,Math.PI/2);
        //5.直线路径
        context.lineTo(100,100);//指回圆点
        //6.结束路径
        context.closePath();
        //7.填充样式
        context.fillStyle="red";
        //8.绘制填充圆
        context.fill();
        //绘制轮廓圆
        // context.stroke();
    }
</script>

1.2.4 圆移动

<body>
    <canvas width="400px" height="400px"></canvas>
</body>
<script>
    window.onload = function(){
        //1.获取canvas对象
        var canvas = document.querySelector("canvas");
        //2.获取上下文对象
        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);
        }
    }
    
</script>

1.2.5 绘制图像

<body>
    <canvas width="400px" height="400px" style="background-color: #ccc"></canvas>
</body>
<script>
    window.onload = function(){
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext("2d");
        //创建img节点，绘制到画布中
        var img = new Image();
        img.src = "./img/1.jpg";
        //图片加载完毕后将图片放置到画布中
        img.onload = function(){    
            context.drawImage(img,0,0,200,200);//0 0 是位置 200 200是宽高
        }
    }
</script>

1.2.6 绘制视频

<body>
    <canvas width="400px" height="400px">
    <video src="./img/1.mp4" width="400px" controls></video>
</body>
<script>
    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);
        }
    }
</script>

2. 拖拽

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序的之间的拖拽，通过拖拽可以传递数据。
（1）拖动事件：dragstart开始拖动，drag正在拖动，dragend拖动结束
（2）放置事件：dragenter进入放置对象，dragover正在放置对象中，drop放置结束
（3）拖拽事件流：当拖动一个元素放置到目标元素上的时候会按照如下顺序依次触发
    dragstart->drag->dragenter->dragover->drop->dragend
（4）在拖拽事件中，我们可以通过dataTransfer来实现数据交互，通过event.dataTransfer来获取dataTransfer实例
    方法：setData,getData,clearData
<style>
    .parent{
        height: 200px;
        border: 1px solid cyan;
    }
    .child{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        float: left;
        margin: 10px;    
    }
    body{
        height: 400px;
    }
</style>
<script>
    window.onload = function(){
        var parent = document.querySelector(".parent");
        var childs = document.querySelectorAll(".child");
        //类数组转数组
        childs = Array.from(childs);
        childs.forEach(function(item){
            //开始拖放
            item.ondragstart = function(event){
                event.dataTransfer.setData('id',item.id);
            };
            //拖放对象
            //正在拖放
            item.ondrag = function(){
                console.log("ondrag");
            };
            //拖放结束
            item.ondragend = function(){
                console.log("ondragend");
            };
        })
        //放置对象事件
        //将拖放元素拖放 放置在对象中
        parent.ondragenter = function(){
            console.log("ondragenter");
        }
        //在放置对象中移动    
        parent.ondragover = function(event){
            //取消冒泡事件默认行为
            event.preventDefault();
            console.log("ondragover");
        }
        //将拖放对象在放置在放置对象中了
        parent.ondrop = function(event){
            var id = event.dataTransfer.getData("id");
            var dom = document.querySelector("#"+id);        
            this.appendChild(dom);
            //阻止事件冒泡
            event.stopPropagation();
        }
        //将parent中的元素拖到body中
        document.body.ondragover = function(event){
            //取消默认行为
            event.preventDefault();
        }
        document.body.ondrop = function(event){
            var id = event.dataTransfer.getData('id');
            var dom = document.querySelector("#"+id);
            this.appendChild(dom);
        }
    }
</script>
<body>
    <div class="parent"></div>
    //draggable表示允许拖放，false表示不可拖放
    <div clss="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>

3.线性渐变

<body>
    <canvas width="400px" height="400px"></canvas>
</body>
<script>
    window.onload = function(){
        //获取画布
        var canvas = document.querySelector("canvas");
        //获取上下文
        var context = canvas.getContext("2d");
        //声明一个线性渐变对象 ，第一第二个参数分别为xy轴开始位置，最后两个为结束位置
        var g = context.createLinearGradient(0,0,400,400);
        //给渐变对象添加渐变色 0-1
        g.addColorStop(0,"red");
        g.addColorStop(0.5,"green");
        g.addColorStop(1,"cyan");
        //把渐变对象给到样式填充图形
        context.fillStyle=g;
        //绘制图形
        context.fillRect(0,0,400,400);
        
    }
</script>

4. 径向渐变

<body>
    <canvas width="400px" height="400px"></canvas>
</body>
<script>
    window.onload = function(){
        //获取画布
        var canvas = document.querySelector("canvas");
        //获取上下文
        var context = canvas.getContext("2d");
        //声明一个径向渐变对象 参数分别为xy轴小圆心+半径 径向渐变xy轴大圆心+半径
        var g = context.createRadialGradient(200,200,50,200,200,200);
        //给径向对象添加渐变色 0-1
        g.addColorStop(0,"red");
        g.addColorStop(0.5,"green");
        g.addColorStop(1,'cyan');
        //把渐变对象给到样式填充图形
        context.fillStyle = g;
        //绘制图形
        context.fillRect(0,0,400,400);
    }
</script>

5. Web存储

5.1 cookie

cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie。
一般情况下，cookie时产生于服务器端，保存于客户端
但是我们也可以通过js来产生cookie;通常通过js-cookie这个库来操作cookie
(1)Cookie //创建一个cookie,7天后过期
    Cookies.set("name","terry",{expires: 7});
(2)获取cookie
    console.log(Cookie.get("name"));
(3)移出cookie
    Cookies.remove("name");
cookie只针对于服务器，同一个服务器可以共享cookie。cookie存储少量数据，面向服务器，4KB

5.2 WebStorage

1.sessionStorage 会话存储 选项卡
    (1)会话存储特点：页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍然会保持原来的页面会话。
        打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
        关闭对应浏览器tab，会清除对应的sessionStorage。
    (2)sessionStorage 实例方法
        //设置内容
        sessionStorage.setItem("name","terry");
        //获取内容
        console.log(sessionStorage.getItem("name"));
        //清空内容的属性值
        //sessionStorage.clear()    
        //清空内容
        sessionStorage.removeItem("name");
2. localStorage 本地存储 存到本地磁盘中，即使浏览器关闭数据依然存在
        //设置内容
        localStorage.setItem("name","larry");
        //获取内容
        console.log(localStorage.getItem("name"));
        //清空内容的属性值
        localStorage.clear();
        //清空内容
        localStorage.removeItem("name");

web存储总结：
(1)cookie存储 存储少量数据，面向服务器，同一个服务器的cookie是共享的，最大是4kb。实例方法有Cookies.set(),Cookies.get(),Cookie.remove();
(2)WebStorage
        a.sessionStorage 会话存储，选项卡，选项卡关闭时，会话失效。写项目的时候推荐使用。
        实例方法有：sessionStorage.setItem(),sessionStorage.getItem(),sessionStorage.clear(),sessionStorage.removeItem()。
        b.localStorage 本地存储，存到本地磁盘中，即使浏览器关闭数据依然存在。
        实例方法有：localStorage.setItem(),localStorage.getItem(),localStorage.clear(),localStorage.removeItem()。

6.通信（跨文档消息传输）

H5提供了网页文档之间互相接收与发送消息的功能。
当在a页面中通过window.open方法打开b页面，或者在a页面中通过iframe嵌套b页面
我们想让a中的数据传到b中就可以使用跨文档消息。

(1)通过window.open打开b页面 A1页面打开新窗口
window.onload = function(){
    //获取button按钮
    var btn = document.querySelector("button");
    //获取发送数据按钮
    var sendBtn = document.getElementById("send");
    //内联框架按钮
    var iframeBtn = document.getElementById("iframe");
    //点击btn 打开一个新窗口
    var win;
    btn.onclick = function(){
        win = window.open('./B1.html');
    }
    //点击send按钮 发送消息给B1窗口
    sendBtn.onclick = function(){
        win.postMessage("hello","http://127.0.0.1:5500");
    }
    //内联框架
    iframeBtn.onclick = function(){
        //获取B1内联窗口，使用窗口发送数据
        win = document.querySelector("iframe").contentWindow;
    }
}

(2)B1页面接受传递过来的消息
window.onmessage = function(event){
    //接收到的数据
    console.log(event.data);
    //数据的来源
    console.log(event.origin);
}

<body>
    <button>打开B1页面(获取B1窗口)</button>
    <button id="send">发送数据</button>
    <button id="iframe">给内联框架发送消息（获取内联B1窗口）</button>
    <iframe src="./B1.html" frameborder="0"></iframe>
</body>

7.webSocket

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
WebSocket使得客服端和服务器之间得数据交换变得更加简单，允许服务端主动向客户推送数据
使用websocket可以在服务器与客服端之间建立一个非HTTP的双向连接，这个连接是实时的也是永久的，除非被显示关闭。服务器可以随时将消息推送到客户端。
要想实现websocket连接，需要有服务器的支持。
//WebSocket对象
var socket = new WebSocket("ws://47.93.206.13:7788/imserve/1");
//接受推送消息事件监听
socket.onmessage = function(event){
    //event.data就是推送的数据
    console.log(event.data);
}
    //websocket和服务器连接成功的监听
socket.onopen = function(){
        console.log("websocket和服务器连接成功的监听");
        socket.send("这是浏览器给服务器端的数据");
    }
    //websocket和服务器连接关闭的监听
socket.close = function(){
        console.log("websocket和服务器连接关闭");
    }
setTimeout(socket.close,5000);

8. 地理位置

geolocation是web api 也是h5 api
H5中添加了获取地理位置的API
window.navigator.geolocation.getCurrentPosition。它也是百度和高德地图通过浏览器定位的实现原理
window.navigator.geolocation.getCurrentPosition(function(position){
    console.log(position);
})

H5 API

1.HTML5新特性

1.1媒体元素

1.1.1 video

1.1.2 audio音频

1.2 canvas

1.2.1 绘制填充矩形(fillRect)

1.2.2 绘制轮廓矩形/边框矩形

1.2.3 绘制圆

1.2.4 圆移动

1.2.5 绘制图像

1.2.6 绘制视频

2. 拖拽

3.线性渐变

4. 径向渐变

5. Web存储

5.1 cookie

5.2 WebStorage

6.通信（跨文档消息传输）

7.webSocket

8. 地理位置

流走的年华

引用和评论

清除浮动的方法

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包