--H5--

最新推荐文章于 2022-06-08 15:51:30 发布
最新推荐文章于 2022-06-08 15:51:30 发布
阅读量191 收藏
点赞数
文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuwanH/article/details/120267935
版权

目录

一、progress

二、input输入框

三、音视频

四、画布-->canvas

五、拖拽--draggable

一、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>

页面预览：

五、拖拽--draggable

（1）拖拽元素：

                dragstart-->开始拖拽；drag-->正在拖拽；dragend-->结束拖拽；

        目标元素：

                dragenter-->拖拽元素进入目标元素；dragover-->拖拽元素在目标元素中移动；

                drop-->拖拽元素放置到目标元素中

（2）拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照以下顺序依次触发：

        dragstart-->drag-->dragenter-->dragover-->drop-->dragend

（3）数据交互：dataTransfer

        设置值：event.dataTransfer.setData()

        获取值：event.dataTransfer.getData()

（4）拖拽需满足：

        拖拽元素可拖拽-->draggable

        目标元素可放置-->ondragover = function(){event.preventDefault()//阻止默认行为}

<style>
        body{
            height: 100vh;
        }
        .container{
            height: 100px;
            border: 1px solid palevioletred;
            margin: 0 auto;
        }
        .item{
            height: 100px;
            width: 100px;
            border: 1px solid palevioletred;
            margin-left: 10px;
            float: left;
        }
</style>
<body>
    <div class="container"></div>
    <div class="item" id="item1" draggable="true">1</div>
    <div class="item" id="item2" draggable="true">2</div>
    <script>
        
        // 目标元素
        var container = document.getElementsByClassName('container')
        var containers = Array.from(container);
        var body = document.body;
        containers.push(body);
        // 拖拽元素
        var item = document.getElementsByClassName('item');
        // 将其转为数组
        var items = Array.from(item);
        console.log(items);
        items.forEach(function(item){
            item.ondragstart = function(){
                // 一定要设置setData才能在getData中获得数据
                event.dataTransfer.setData('id',item.id)
                // 设置值
            }
        })
        containers.forEach(function(item){
            // 拖拽元素在目标元素中移动
            item.ondragover = function(event){
                // 阻止默认行为，使其目标元素可放置
                event.preventDefault();
            }
            // 拖拽元素放置到目标元素中
            item.ondrop = function(event){
                var id = event.dataTransfer.getData('id');
                var dom = document.getElementById(id);
                this.appendChild(dom);
                // 若想使其拖拽放置在body中，需要阻止事件冒泡
                event.stopPropagation();
            }
        })
    </script>
</body>

 

SuwanH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas的属性
ScumStudy的博客
03-12 1452
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> let c=document.getElementById('myCanvas') let ctx=c.getContext('2d') fillStyle：设置或返回用于填充绘画的颜色、渐变或模式 ctx.fillStyle="#0000ff"; fillRect：绘制“被填充”的矩形 //cont
canvas学习笔记
qq_52151772的博客
12-16 834
canvas context是一个封装了很多绘图功能的对象，获取这个对象的方法是 var context =canvas.getContext("2d"); canvas元素绘制图像的时候有两种方法，分别是 context.fill()//填充 context.stroke()//绘制边框 style:在进行图形绘制前，要设置好绘图的样式 context.fillStyle//填充的样式 context.strokeStyle//边框样式 context.lineWidth//图形边框宽度
canvas 快速入门
p1967914901的博客
06-08 890
在本文中，我们将学习的特性，包括如何在HTML文档中引入Canvas以及在Canvas上绘制图形和各种对象。我们也将学习如何修改绘制在Canvas上的图形和对象，以及如何擦除它们。最后，将通过一个例子来学习如何将Canvas，尺寸设置为浏览器窗口的大小。与和类似，元素完全不需要任何外部插件就能够运行。你只需要使用 HTML 并使用2D谊染上下文API(2D rendering context API)编写一些JavaScript代码。即使你现在还不了解什么是2D渲染上下文API，也不用担心一你很快就会熟悉这
canvas的学习（一）
weixin_43558096的博客
03-10 78
canvas的学习（一） 利用html的canvas学习来画一个复杂三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三角形</title> </head&g
HTML5中canvas的fillRect、arc用法
sxj的专栏
11-20 8406
1、要使用html5，首先要有一个支持html5的浏览器，比如：火狐，谷歌等等，首先在body区域加入一个canvas标签，id为canvas-fram,如一下代码： 2、在head区域加入一个draw2D函数，在函数内通过document.getElementById("canvas-fram")获得canvas标签对象，然后在通过该对象的getContext("2d")获得可画图形的画板，最
h5-design.rar
03-26
营销页搭建体系，快速生成落地页代码，暂存区~
h5-pdf-master.zip
11-23
uniapp 使用webview h5 预览pdf
ckeditor-5 支持H5 player
最新发布
06-07
修改视频上传ckeditor,支持H5 player
iview-admin
08-16
iview-admin 好多人在 GitHub 下不下来，这块提供下载包
vue-h5-template
03-20
动动你可爱的小手点亮一颗star ，模板基于vue-cli4和Vant-ui建造，进行大型H5项目开发最佳实践方案，让我们来一探究竟 项目结构 本项目已经为你生成了一个完整的开发框架，下面是整个项目的目录结构。 ├── ....
HTML5动画----canvas基础3（变换图形--普通变换）
wenmin1987的博客
06-30 413
Canvas状态指的是当前画面所有样式、变形和裁切的一个快照，以堆（Stack）的方式保存。 context.save();暂时把状态（各种属性的值，如strokeStyle,fillStyle,globalComositeOperation等，当前应用的变形，当前的裁切路径等）保存在堆中 context.restore()；把保存的状态从堆中取出，恢复该状态的所有设置。 <...
java fillrect 填充图片_canvas绘图详解-08-样式填充
weixin_39688856的博客
02-24 646
样式填充fillStyle = color 颜色值gradient 渐变色image 图片canvas 画布video 视频strokeStyle也适用1、fillStyle = color可以填充任何css承认的颜色值2、fillStyle =gradient 渐变色(线性渐变||镜像渐变)var linearGrd = context.createL...
说说在 Canvas 中如何用图片来填充形状
读万卷书，行万里路
10-07 3701
context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");。 参数 描述 image 要使用的图片、画布或视频元素。 repeat 默认值，表示在水平和垂直方向重复。 repeat-x 表示在水平方向重复。 repeat-y 表示在垂直方向重复。 no-repeat 表示只显示一次（不重复）。 假设有一
Quartz画图函数笔记
zani的博客
09-19 227
转自:http://www.cocoachina.com/bbs/read.php?tid-75122.html   0  CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文1 CGContextMoveToPoint 开始画线2 CGContextAddLineToPoint 画直线4 CGContextAddEllipse...
fillStyle线性渐变
xiaozhen0610的博客
06-28 922
废话小说，沾待马 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></hea
Canvas——2D上下文
前端萌新一枚
09-13 3468
Canvas——2D上下文 一、基本概念 使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径 2D上下文的坐标开始于&amp;amp;amp;amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;amp;amp;amp;gt;元素的左上角，原点坐标(0,0)。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下 默认情况下，width和height表示水平和垂直两个方向上可用
JS Canvas context API 画布
王小磊
05-26 1607
// Ready var elem = document.getElementById("myCanvas"); var context = elem.getContext('2d');   //2D context API----线条 context.fillStyle = '#00f';  //填充色 context.strokeStyle = '#f00';
Quartz 2D编程指南(2) － 图形上下文(Graphics Contexts)
跑吧的专栏
10-12 4669
一个Graphics Context表示一个绘制目标。它包含绘制系统用于完成绘制指令的绘制参数和设备相关信息。Graphics Context定义了基本的绘制属性，如颜色、裁减区域、线条宽度和样式信息、字体信息、混合模式等。 我们可以通过几种方式来获取Graphics Cont
vue-video-player使用及修改样式
dghgjuyhuoyho的博客
03-10 4922
首先下载并引入(main.js引入)： import VideoPlayer from 'vue-video-player'; require('video.js/dist/video-js.css'); require('vue-video-player/src/custom-theme.css'); const hls = require('videojs-contrib-hls') Vue.use(VideoPlayer) Vue.use(hls) 使用: <div class="
h5-audio-recorder
05-23
h5-audio-recorder 是一个基于 HTML5 技术的录音插件，可以在浏览器中录制音频并将其保存为 MP3、WAV 等格式。它支持多种浏览器，并且...使用 h5-audio-recorder 可以方便地实现语音留言、在线教育、语音识别等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值