H5 API

HTML5 API

A:Appli cation 应用
P:process 进程（程序）
I:Interfale 接口

多媒体

多媒体video标签中，poster属性，添加画面第一针的画面
注：需要关闭autoplay（自动播放属性）

<!-- autoplay属性关闭 -->
    <video src="./video/loop.mp4" controls muted loop poster="./img/猫和老鼠.gif"></video>

播放视频 视频节点.play();
视频停止 视频节点.pause();
视频音量 视频节点.volume=0.5;声音(取值0-1,0是静音，1是最大音量)
视频快进或者后退 视频节点…currentTime+=10;（+是快进,-是后退）
倍数播放 视频节点.playbackRate=3 倍速设置范围（0.1-16）
全屏 视频节点.webkitRequestFullscreen();

let v1 = document.querySelector("video");
//获取广告节点
let guanggao = document.getElementsByClassName("box2")[0];
// 点击X关闭广告
let guanbi = document.querySelector("p");
guanbi.addEventListener("click",function(e){0
    let event = e||window.event;
    guanggao.style.display = "none";
})
// 播放与停止
let bofang = document.getElementsByClassName("bofang")[0];
bofang.addEventListener("click", function () {
    if (this.dataset.temp == "true") {
        v1.play();//开始播放
        this.dataset.temp = false;
        guanggao.style.display = "none";
        this.value = "暂停";
    } else {
        v1.pause();//停止播放
        this.dataset.temp = true;
        guanggao.style.display = "block";
        this.value = "播放";
    }
})
// 设置静音
let yinliang = document.getElementsByClassName("yinliang")[0];
yinliang.addEventListener("click", function (e) {
    //设置视频播放声音(取值0-1,0是静音，1是最大音量)
    v1.volume = 0.5;
    //去除视频的静音
    v1.muted = false;
})
//视频快进
let kuaijin = document.getElementsByClassName("kuaijin")[0];
kuaijin.addEventListener("click", function (e) {
    v1.currentTime += 10;
    console.log(v1.currentTime);
})
//视频后退
let houtui = document.getElementsByClassName("houtui")[0];
houtui.addEventListener("click", function (e) {
    v1.currentTime -= 10;
    console.log(v1.currentTime);
})
//3倍速播放
let beisu_kuai = document.getElementsByClassName("3beisu")[0];
beisu_kuai.addEventListener("click", function (e) {
    v1.playbackRate = 3;
})
//0.5倍速播放
let beisu_man = document.getElementsByClassName("0.5beisu")[0];
beisu_man.addEventListener("click", function (e) {
    v1.playbackRate = 0.5;
})
//全屏
let quanping = document.getElementsByClassName("quanping")[0];
quanping.addEventListener("click", function (e) {
    //   launchFullscreen(v1);
    v1.webkitRequestFullscreen();
})

SVG

矢量图，不会随放大缩小失帧
在svg标签里添加内容：
1、circle画圆 cx是X轴位置 cy是Y轴位置 r是半径 stroke圆的边（颜色）stroke-width圆边的粗细 fill填充圆内部的颜色
2、rect画矩形 x是X轴位置 y是Y轴位置 width是矩形长度 height是高度 style是内置样式 fill填充矩形内部的颜色 stroke-width边框粗细 stroke边框颜色
3、line画线 x1和y1是线的起始位置 x2和y2是线的结束位置
4、text文字 x是X轴位置 y是Y轴位置 fill是颜色
5、tspan添加文字 不设置xy会默认继承父级（text）的xy轴的位置 rotate旋转的角度

 <!-- svg画图标签 -->
    <svg>
        <circle cx="100" cy="100" r="30" stroke="blue" stroke-width="2" fill="transparent"></circle>
        <rect x="200" y="200" width="200" height="100" style="fill: yellow;stroke-width:1;stroke:rgb(50,100,150)">
        </rect>
        <line x1="150" y1="150" x2="400" y2="400" style="stroke: cornsilk;stroke-width:2"></line>
        <line x1="250" y1="50" x2="500" y2="200" style="stroke: skyblue;stroke-width:2"></line>
        <line x1="350" y1300" x2="600" y2="100" style="stroke: rgb(170, 139, 17);stroke-width:2"></line>
        <text x="500" y="300" fill="black">
            阿良
            <tspan x="200" y="200" rotate="30">
                好人
            </tspan>
            <tspan x="300" y="300" rotate="30">
                坏人
            </tspan>
            <tspan x="300" y="100" rotate="30">
                烂人
            </tspan>
        </text>
    </svg>

Canvas

位图，会随放大缩小变形
有默认宽高: 300*150
设置宽高要用内嵌式，不要用css设置，会拉扯改变效果

<canvas width="600" height="400">

//1、获取画布节点
let canEle=document.querySelector("canvas");
//声明w、h获取画布宽高
let {offsetWidth:w,offsetHeight:h}=canEle;
// console.log(canEle);
// 2、获取上下文（即在这个区域进行绘画）
let pen = canEle.getContext("2d");
pen.beginPath();//路径
pen.strokeStyle="deeppink";//线的颜色
pen.lineWidth=3;//边框的粗细
pen.stroke();//画一条线

画线

.moveTo();开始位置：两个参数 XY
moveTo 起笔点，即笔抬起来的地方
由于上一次的结束点和下一次的起始点，默认会进行连接
解决：取新的起始点的坐标，用于moveTo的坐标，并把moveTo添加到起始点之前；
.lineTo();结束位置：两个参数 XY

// 【三角形】
pen.moveTo(20,20);
pen.lineTo(110,20);//横线
pen.lineTo(20,140);//竖线
pen.strokeStyle="skyblue";//线的颜色
pen.lineTo(20,20);//斜线
pen.strokeStyle="black";//线的颜色
pen.lineWidth=1;//线的粗细
pen.fillStyle = "yellow";
//填充角度要小于90度
pen.fill();
pen.stroke();//画一条线

画矩形

.rect(); 四个参数分别是X,Y,宽,高
.fillRect(); 参数同上
.strokeRect(); 参数同上

// 【矩形】
pen.beginPath();//路径
pen.rect(80,80,100,70);//矩形，四个参数分别是X,Y,宽,高
pen.fillStyle="springgreen";
pen.fill();
pen.strokeStyle="steelblue";
pen.stroke();//画矩形
// 实心矩形
pen.beginPath();
pen.fillStyle="purple";//边框颜色
pen.fillRect(200,200,100,60)//四个参数同上
// 空心矩形
pen.strokeStyle="rgb(30, 199, 15)";//填充色
pen.strokeRect(20,200,100,60)//四个参数同上

清空画布 .clearRect();

pen.clearRect(0,0,w,h);//开始点0,0  结束点宽，高的值

保存样式 .save();

pen.save();

获取保存的样式 .restore();

pen.restore();

画圆 .arc();

// 【圆形】
//获取pai
let Pai = Math.PI;
console.log(Pai);
/**
 *参数1:X
 * 参数2:Y
 * 参1和参2设置圆心
 * 参数3:半径
 * 参数4:起笔点
 * 参数5:结束点
 * 参数6:false(顺时针，默认)，true逆时针
**/

【画太极】

// 右外圆
pen.beginPath();
pen.arc(200,200,160,Pai/180*270,Pai/180*450);
pen.stroke();
pen.fillStyle="white";//颜色
pen.fill();
// 上圆弧
pen.beginPath();
pen.arc(200,120,80,Pai/180*90,Pai/180*270,true);
pen.fillStyle="black";
pen.fill();
//上圆心
pen.beginPath();
pen.arc(200,120,20,0,2*Pai);
pen.fillStyle="white";
pen.fill();
// 左外圆
pen.beginPath();
pen.arc(200,200,160,Pai/180*90,Pai/180*270);
pen.stroke();
pen.fillStyle="black";//颜色
pen.fill();
//下圆弧
pen.beginPath();
pen.arc(200,280,80,Pai/180*270,Pai/180*450,true);
pen.fillStyle="white";
pen.fill();
//下圆心
pen.beginPath();
pen.arc(200,280,20,0,2*Pai);
pen.fillStyle="black";
pen.fill();

当前画布X轴铺满形状(搭配for循环)
.translate();旋转

// let num = parseInt(w / 50);
// for (let i = 1; i <= num; i++) {
//     pen.beginPath();
//     pen.arc(25, 25, 25, 0, 2 * Pai);
//     pen.translate(50, 0);
//     pen.moveTo(50, 50);
//     pen.fillStyle = "black";
//     pen.stroke();
// };

旋转的圆(搭配for循环)

// let num = 360/40;
// pen.translate(250,250);
// for(let i = 0;i<num;i++){
//     pen.beginPath();
//     pen.rotate(Pai*40/180)
//     pen.arc(25, 25, 10, 0, 2 * Pai);
//     // pen.rect(25,25,20,20);
//     pen.fillStyle = "white";
//     pen.fill();
// };

添加文字.font="";

pen.beginPath();
pen.fillStyle="white";
pen.fill();
pen.font="bolder 30px 黑体";
pen.fillText("阿良",220,250);

SVG和Canvas区别：
1、svg放大缩小不会失帧，而Canvas会
2、svg是用JS画图，Canvas是用自己的标签节点画图