5-多媒体

最新推荐文章于 2024-06-14 11:01:38 发布

金霖海

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量55

点赞数

分类专栏：前端2 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_33396183/article/details/132069664

版权

前端2 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

多媒体

一音频

HTML5 新增了音频播放标签来实现音频的播放

1 语法

标签

<audio>
  <source src="备用音频的地址" type="audio/mp3">
  <source src="备用音频的地址" type="audio/wav">
 </audio>

常用属性
- controls:显示控制栏
- loop:是否需要循环播放
- paused：表示当前音频是否暂停的状态，布尔型，暂停时为true，可以通过JavaScript来获取
api
- play():播放
- pause():暂停

2 案例-音乐播放器

https://www.xzmp3.com/down/4874bea05337.mp3

    <audio >
        <source src="https://www.xzmp3.com/down/4874bea05337.mp3" type="audio/mp3">
    </audio>

    <button id="playOrPause">播放</button>
    <script>
        let obtn = document.querySelector("#playOrPause")
        let audio = document.querySelector("audio")
        obtn.onclick = function(){
            // audio.paused获取播放状态
            if(audio.paused){
                audio.play()
                this.innerText = "暂停"
            }else{
                audio.pause()
                this.innerText = "播放"
            }
        }
    </script>

二视频

HTML5 新增了视频播放标签来实现视频的播放

1 语法

标签

    <video class="vi" controls>
        <source src="视频地址"/>
    </video>

常用属性
- controls
- autoplay
- loop
- poster:视频播放前展示的图片地址

2 案例

https://media.w3.org/2010/05/sintel/trailer.mp4
http://placekitten.com/1200/315

<!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>
        video{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <video controls poster="http://placekitten.com/1200/315">
        <source src="https://media.w3.org/2010/05/sintel/trailer.mp4"/>
    </video>
</body>
</html>

三 canvas画布

canvas是H5提供的画布技术，可以在前端实现绘图的功能。

应用场景：

1、H5游戏，比如捕鱼达人、植物大战僵尸等

2、绘制图表，网站上看到的条形图、曲线、k线图等

1 使用步骤

1 创建画布

<canvas width="600" height="600" id="mycanvas"></canvas>

说明：

cavans的高度最好不要用css来调整，直接在标签上面设置宽高，或者JS来控制宽高属性。

canvas的边框、颜色可以通过css来调整

2 创建画笔

const myCanvas = document.querySelector("#mycanvas")
const pen = myCanvas.getContext("2d")

3 绘制线条

/**
* 1.画线
*/
//a.线的起点
pen.moveTo(400,400)
//b.线的终点
pen.lineTo(500,400)
//c.把点连接成线
pen.stroke()

4 闭合路线和填充颜色

<!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>
        #myCanvas{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas"></canvas>
    <script>
        //获取画布
        let myCanvas = document.querySelector("#myCanvas")
        //创建画笔
        let pen = myCanvas.getContext("2d")

        /**
         * 2线路闭合,颜色填充
        */
        //绘制线的起点
        pen.moveTo(200,200)
        //绘制线的终点
        pen.lineTo(200,300)
        pen.lineTo(300,300)
        //闭合线路
        pen.closePath()
        //把点连接成线
        pen.stroke()
        //颜色填充
        pen.fill()
    </script>
</body>
</html>

说明

closePath()闭合线路

fill()填充颜色

5 设置画笔的样式（颜色、类型等）

属性名	可选属性值	说明
`fillStyle`	颜色字符串	设置图形的填充（背景）颜色。
`strokeStyle`	颜色字符串	设置图形的轮廓（边框）颜色。
`lineWidth`	数字	设置线条的粗细（属性值必须是正数）。
`lineJoin`	round（圆角）、bevel（斜角）	设置线条与线条间交接处的样式。
`lineCap`	round（圆角）	设置每一条线段两端的样式。

2 练习

在页面绘制一个三角形、再绘制一个平行四边形

3 路径和样式初始化

save():将当前的画笔样式保存一份到内存中

restore():要将内存中保存的画笔样式，取出来重置我们画笔

注意:在程序中 save和restore语法的数量必须是相等的

4 绘制矩形

方法名	参数	说明
`fillRect()`	x轴坐标、y轴坐标、矩形宽度、矩形高度	绘制有背景颜色的矩形
`strokeRect()`	x轴坐标、y轴坐标、矩形宽度、矩形高度	绘制有边框的矩形
`clearRect()`	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>
    <style>
        #myCanvas{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas"></canvas>
    <script>
        //获取画布
        let myCanvas = document.querySelector("#myCanvas")
        //创建画笔
        let pen = myCanvas.getContext("2d")

        pen.fillStyle = "red"
        //绘制有背景色的矩形
        pen.fillRect(0,0,100,100)

        pen.strokeStyle = "pink"
        //绘制有边框线的矩形
        pen.strokeRect(200,200,100,100)

        //擦除矩形区域
        pen.clearRect(0,0,50,50)
    </script>
</body>
</html>

5 绘制圆弧

arc()圆心x轴坐标、圆心y轴坐标、半径、起始角度、结束角度、是否逆时针（默认顺时针 false）绘制圆形

<!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>
        #myCanvas{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas"></canvas>
    <script>
        //获取画布
        let myCanvas = document.querySelector("#myCanvas")
        //创建画笔
        let pen = myCanvas.getContext("2d")

        pen.arc(200,200,100,0,Math.PI/180*90)
        pen.stroke()
    </script>
</body>
</html>

6 绘制2d图形

translate()：平移

scale()：缩放

rotate()：旋转

<!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>
        #myCanvas{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas"></canvas>
    <script>
        //获取画布
        let myCanvas = document.querySelector("#myCanvas")
        //创建画笔
        let pen = myCanvas.getContext("2d")

        //位移
        pen.translate(100,100)
        //缩放
        pen.scale(0.5,0.5)
        //旋转
        pen.rotate(Math.PI/180*45)

        pen.fillRect(0,0,100,100)
    </script>
</body>
</html>

8 绘制文本

<!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>
        #myCanvas{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas"></canvas>
    <script>
        //获取画布
        let myCanvas = document.querySelector("#myCanvas")
        //创建画笔
        let pen = myCanvas.getContext("2d")

        //文本样式
        pen.font = "30px 微软雅黑"
        //填充颜色
        pen.fillStyle = "red"
        //线条颜色
        pen.strokeStyle = "pink"
        //绘制实心文本
        pen.fillText("蜗牛",100,100)
        //绘制空心文本
        pen.strokeText("蜗牛",300,300)
    </script>
</body>
</html>

四 canvas实战-绘制验证码

html

<!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>
        #myCanvas{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="验证码">
    <canvas width="100" height="50" id="myCanvas"></canvas>
    <button id="btn">验证验证码</button>
    <script>
        //获取画布
        let myCanvas = document.querySelector("#myCanvas")
        //创建画笔
        let pen = myCanvas.getContext("2d")

        //获取画布的尺寸
        let canvasWidth = myCanvas.clientWidth
        let canvasHeight = myCanvas.clientHeight

        function main(){
            // 清除矩形
            pen.clearRect(0,0,canvasWidth,canvasHeight)
            drawText()
        }
        main()


        /**
         * 绘制文本
        */
        function drawText(){
            let code = ""
            for(let i=0;i<4;i++){
                pen.font = "30px 微软雅黑"
                let c = randomChar()
                pen.fillText(c,canvasWidth/4*i,canvasHeight/5*3)
                code += c
            }
            // 把验证码保存到sessionStorage
            sessionStorage.setItem("code",code)
        }


        /**
         * 随机一个字符
        */
        function randomChar(){
            let str = "AaBbCcDdEeFfGɡHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789"
            console.log(str.length);
            //生成随机下标
            let index = Math.floor(Math.random()*str.length)
            return str[index]
        }


        myCanvas.onclick = function(){
            main()
        }


        let obtn = document.querySelector("#btn")
        let oinput = document.querySelector("input")
        obtn.onclick = function(){
            //拿到sessionStorage中的验证码
            let code = sessionStorage.getItem("code")
            //拿到用户输入的验证码
            let msg = oinput.value
            if(code.toLowerCase() == msg.toLowerCase()){
                alert("验证码输入正确")
            }else{
                alert("验证码输入错误")
            }
        }
    </script>
</body>
</html>