ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

--H5--

2021-09-14 19:01:06  阅读:127  来源: 互联网

标签:canvas -- H5 video context var 100 绘制


目录

一、progress

二、input输入框

三、音视频

四、画布-->canvas


一、progress

1.progress 表示运行中的进度

<progress></progress>

(1)在HTML中放置progress标签,无内嵌属性和文本时,显示的是整个进度条被填满的状态

 (2)给progress设置属性

<progess value='50' max='100'></progress>

其中value是进度条在框里的进度,注意:设置value属性时,一定要设置max属性,页面才有效果

二、input输入框

1.placeholder用来描述输入字段语气值的提示信息。注意:输入字段为空时显示

输入框:<input type='text' placeholder='输入'>

 在鼠标点击输入框还没输入内容时,输入框会显示提示信息输入

 当输入内容时,提示信息会消失

 2.type的类型,可以设置为number或date类型等。注意:其兼容性较差,在火狐浏览器中没有效果,在谷歌有效果--->不推荐使用

三、音视频

1.video-->视频

        属性:

        (1)src需要引入的视频地址                (2)controls 是否显示视频控件

        (3)autoplay 在视频就绪后马上播放                (4)muted 视频音频为静音模式

       [注意:autoplay要与muted搭配使用,否则不能自动播放]

        (5)loop 视频循环播放                (6)volume 视频音量 0~1

        (7)duration 视频总时长                (8)currentTime 当前播放进度

        (9)paused当前视频状态是否暂停 暂停true                (10)width、height 视频宽高

        (11)playbackRate 设置或返回视频当前的播放速度

        (12)end 视频是否播放结束 结束返回true

        方法:

        (1)play() 播放        (2)pause() 暂停        (3)load() 重新加载当前视频

实例:利用按钮来控制视频

<!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>video</title>
</head>
<body>
    <!-- 设置视频 -->
    <video src="./MV.mp4" autoplay muted controls loop></video><br>
    <!-- 设置按钮 -->
    <div id="btns">
        <button>播放</button>
        <button>暂停</button>
        <button>快进</button>
        <button>快退</button>
        <button>快倍速</button>
        <button>慢倍速</button>
        <!-- 播放和暂停按钮合一 -->
        <button>▶</button>
        <button>百分比</button>
    </div>
    <script>
        // 获取视频
        var video = document.getElementsByTagName('video')[0];
        // 用事件委托
        var btns = document.getElementById('btns');
        btns.onclick = function(event){
            var target = event.target;
            console.log(target.innerText);
            switch(target.innerText){
                case '播放':
                    video.play();
                    break;
                case '暂停':
                    video.pause();
                    break;
                case '快进':
                    video.currentTime += 10;
                    video.play();
                    break;
                case '快退':
                    video.currentTime -= 10;
                    video.play();
                    break;
                case '快倍速':
                    video.playbackRate *= 3;
                    video.play();
                    break;
                case '慢倍速':
                    video.playbackRate *= 0.1;
                    video.play();
                    break;
                case '▶':
                // video.pause -->true暂停
                    if(video.paused){
                        video.play()
                    }else{
                        video.pause()
                    }
                    break;
                case '百分比':
                    var current = video.currentTime;
                    var total = video.duration;
                    var bee = (current/total*100).toFixed(2);
                    alert(bee + '%');
                    break;
            }
        }
    </script>
</body>
</html>

2.audio-->音频 使用方式与video类似

四、画布-->canvas

1.canvas是专门来绘制图形的,在页面中放置一个canvas元素,相当于在页面上放置一块画布,canvas只是一个容器

2.绘制步骤

实例一:绘制矩形

(1)取得canvas对象        (2)取得2d上下文       

(3)设置绘图样式,使用图形上下文对象中的fillStyle填充样式,strokeStyle边框样式

(4)指定线宽,使用图像上下文对象中的lineWidth

(5)绘制矩形,使用图像上下文对象

<!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>canvas-矩形</title>
</head>
<body>
    <!-- 设置画布 -->
    <canvas height="500" width="500" style="border: 1px solid black;"></canvas>
    <script>
        // 获取画布对象
        var canvas = document.getElementsByTagName('canvas')[0]
        // 获取2d上下文
        var context = canvas.getContext('2d');
        // 设置填充样式-->填充和描边
        context.fillStyle = 'palevioletred';
        context.strokeStyle = 'pink'
        // 设置边框
        context.lineWidth = '2'
        // 绘制矩形
        // context.fillRect(x坐标,y坐标,宽度,高度)
        context.fillRect(20,20,100,100);
        context.strokeRect(200,200,100,100);
        // 清除矩形
        context.clearRect(20,20,20,20)
        context.clearRect(100,20,20,20)
        context.clearRect(20,100,20,20)
        context.clearRect(100,100,20,20)
    </script>
</body>
</html>

实例二:绘制圆形

(1)取得canvas对象        (2)取得2d上下文

(3)设定绘图样式,使用图像上下文对象中的fillStyle填充 strokeStyle边框样式

(4)指定线宽 使用图像上下文对象中的lineWidth

(5)开始创建路径context.beginPath()

(6)设置路径content.arc(圆心x坐标,圆心y坐标,圆半径,开始的角度,结束的角度,绘制的方向false->顺时针)

(7)关闭路径        (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>canvas-绘制圆形</title>
</head>
<body>
    <canvas width="500" height="500" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d');
        context.fillStyle = 'palevioletred';
        context.strokeStyle ='pink';
        context.lineWidth = '2';
        // 创建路径
        context.beginPath()
        // 设置路径
        context.arc(200,200,100,0,Math.PI/180*360,false);
        // 关闭路径
        context.closePath();
        // 设定绘制样式
        context.fill();
        context.stroke();
    </script>
</body>
</html>

注意:与绘制矩形的些微不同点:绘制矩形的设置绘制样式是:context.fillRect() 和context.strokeRect();而绘制圆形的设置绘制样式是:context.fill() 和 context.stroke()

实例三:渐变色

(1)取得canvas对象        (2)获取2d上下文

(3)创建渐变对象,并添加渐变色gradiant

(4)设置填充模式        (5)绘制矩形

<!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>canvas-渐变色</title>
</head>
<body>
    <canvas height="500" width="500" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d'); 
        // 起始和终点座位的坐标
        var gradiant = context.createLinearGradient(100,100,300,300);
        gradiant.addColorStop(0,'palevioletred');
        gradiant.addColorStop(0.5,'yellow');
        gradiant.addColorStop(1,'pink')
        context.fillStyle = gradiant;
        context.fillRect(100,100,200,200)
    </script>
</body>
</html>

实例四:图片

(1)取得canvas对象        (2)获取2d上下文对象

(3)创建图像对象        (4)在图像加载完成后绘制图像

(5)设置平铺模式

<!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>cancas-图片</title>
</head>
<body>
    <canvas height="800" width="800" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0]
        var context = canvas.getContext('2d');
        // 创建图片对象
        var image = new Image();
        image.src = './12.jpg';
        // 在图片加载完成后执行方法
        image.onload = function(){
            // 绘制图片
            context.drawImage(image,10,10,100,100)
            // 创建平铺对象
            var pattern = context.createPattern(image,'repeat')
            context.fillStyle = pattern;
            context.fillRect(200,0,200,200)
        }
    </script>
</body>
</html>

实例五:文字

(1)取得canvas对象        (2)取得2d上下文

(3)设定绘制样式        (4)指定线宽

(5)绘制文字

<!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>canvas-文字</title>
</head>
<body>
    <canvas height="500" width="500" style="border: 1px solid pink;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d');
        context.fillStyle = 'pink';
        context.strokeStyle = 'yellow';
        context.lineWidth = '2';
        //设置文字
        context.font = '50px 宋体';
        context.textAlign = 'center';
        // 绘制文字
        context.fillText('hello wan',200,100);
        context.strokeText('hello su',100,200)
    </script>
</body>
</html>

页面预览:

 

标签:canvas,--,H5,video,context,var,100,绘制
来源: https://blog.csdn.net/SuwanH/article/details/120267935

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有