-
Html5API（自定义属性、媒体元素、canvas画布）（一）
一、自定义属性
data-xxx是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力,所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。
案例：<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> <script> window.onload = function() { var div = document.querySelector('div'); //读取自定义属性 dataset 对象 {} console.log(div.dataset.id) } </script> </head> <body> <div id="one" data-id="1001">div</div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
运行结果：
二、媒体元素(音视频)
1.video
- 属性
controls 进度条
autoplay 自动播放
loop 循环播放
muted 静音播放
poster 设置封面
src 设置视频路径资源
width 宽度
height 高度
<video src="../视频/1.mp4" width="400px" controls loop muted poster="../封面.jpg" loop></video>- 1
- 方法
play() 播放
pause() 暂停 - 切换属性
paused 判断视频播放暂停状态
volume 设置视频音量
currentTime 设置视频播放事件
playbackRate 设置视频播放倍速
案例：
<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> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { // 获取到视频标签 var video = $('video')[0]; // 给一类按钮绑定事件 $('button').click(function() { // 播放视频 if ($(this).text() === '播放') { video.play(); } // 暂停视频 if ($(this).text() === '暂停') { video.pause() } // 切换 视频播放时暂停 视频暂停时播放 if ($(this).text() === '切换') { // video.paused当前视频是否是暂停状态,为true代表暂停 if (video.paused) { video.play() } else { video.pause() } } // 控制音量+ if ($(this).text() === '音量+') { // volume 0-1阈值 video.volume = (video.volume > 0.9 ? 0.9 : video.volume) + 0.1 } // 控制音量 - if ($(this).text() === '音量-') { video.volume = (video.volume < 0.1 ? 0.1 : video.volume) - 0.1 } // 控制视频快进 if ($(this).text() === '快进') { // 以秒为单位 video.currentTime += 10 } // 控制视频回退 if ($(this).text() === '快退') { video.currentTime -= 10 } // 控制视频倍速播放 if ($(this).text() === '倍速播放') { // 取值0 -n // >1 快速播放 // <1 慢速播放 video.playbackRate = 3 } }) // 监听视频音量的事件 video.onvolumechange = function() { if (this.volume > 0.5) { alert('继续调高声音会损伤耳膜') } } }) </script> </head> <body> <!-- 音视频可以设置宽高 --> <video src="../视频/1.mp4" width="400px" controls loop muted poster="../封面.jpg" loop></video> <button>播放</button> <button>暂停</button> <button>切换</button> <button>音量+</button> <button>音量-</button> <button>快进</button> <button>快退</button> <button>倍速播放</button> <audio src="../音视频/1.mp3" autoplay loop controls></audio> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
1.audio
audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致.
<!-- 音视频 不加进度条相当于背景音乐--> <audio src="../音视频/1.mp3" autoplay loop controls></audio>- 1
- 2
三、画布
canvas元素默认具有高宽
width： 300px
height：150px是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形，使用标签时，建议要成对出现，不要使用闭合的形式。<canvas height="400px" width="400px"></canvas>- 1
1.基本使用
(1)获取canvas对象–获取画布
var canvas = document.querySelector('canvas');- 1
(2)取得上下文(context)–获取画笔
图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”var context = canvas.getContext('2d');- 1
(3)定义样式
//设置图形的填充颜色 context.fillStyle='red'; //设置图形轮廓的颜色 context.strokeStyle='red'; //设置当前绘线的粗细,必须为正数 context.lineWidth =3;- 1
- 2
- 3
- 4
- 5
- 6
(4)绘制填充图形
context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高- 1
2.绘制图形
(1)绘制矩形
canvas提供了三种方法绘制矩形：
---->绘制一个填充的矩形（填充色默认为黑色）
fillRect(x, y, width, height)
---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形区域，让清除部分完全透明。
clearRect(x, y, width, height)案例（代码片段）：
<script> window.onload = function() { //1.获取画布 var canvas = document.querySelector('canvas'); // 2.获取画笔 上下文对象 var context = canvas.getContext('2d'); // 3.给图形设置填充样式 // context.fillStyle = "red"; //实心填充 // 4.绘制图形 绘制矩形 // fillRect x,y,w,h // context.fillRect(100, 100, 100, 100); // 绘制轮廓矩形 // 3.给轮廓图形设置填充样式 context.strokeStyle = "blue"; // 给轮廓矩形设置线宽 context.lineWidth = 8 // 4.绘制轮廓图形 context.strokeRect(100, 100, 100, 100); // 清除画布一部分区域 // context.clearRect(100, 100, 50, 50); // 清除画布全部区域 context.clearRect(0, 0, 400, 400); } </script> </head> <body> <canvas height="400px" width="400px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
运行结果：
(2)绘制线段/路径
beginPath()---->新建一条路径，图形绘制命令被指向到路径上准备生成路径
moveTo(x, y)---->将笔触移动到指定的坐标x以及y上，通常会使用moveTo()函数设置起点
ineTo(x, y)---->将笔触移动到指定的坐标x以及y上
closePath()---->闭合路径之后图形绘制命令又重新指向到上下文中。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
stroke()---->通过线条来绘制图形轮廓。 不会自动调用closePath()
fill()---->通过填充路径的内容区域生成实心的图形。 自动调用closePath()案例（代码片段）：
<script> window.onload = function() { // 获取画布 var canvas = document.querySelector('canvas'); // 获取画笔 var context = canvas.getContext('2d'); context.lineWidth = 8; // 需要开始路径 context.beginPath(); // 绘制线段 从哪里开始 到哪里结束 context.moveTo(0, 0) context.lineTo(100, 100); context.lineTo(200, 10); context.lineTo(300, 100); // 需要结束路径 //context.closePath() // 给线段设置颜色 context.fillStyle = "yellow"; context.fill(); // context.strokeStyle = 'cyan'; // context.stroke(); } </script> </head> <body> <canvas width="400px" height="400px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
运行结果：
(3)绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
参数：
x,y： 为绘制圆弧所在圆上的圆心坐标
radius： 为半径
startAngle： 开始的弧度。以x轴为基准
endAngle： 结束的弧度以x轴为基准
anticlockwise： 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。角度与弧度的js表达式:
radians=(Math.PI/180)*degrees案例（代码片段）：
<script> window.onload = function() { var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); // context.fillStyle = "red"; // 给一个开始路径 context.beginPath(); // 绘制圆 arc 参数 x,y,r半径，开始弧度Math.PI(180) ，结束弧度，布尔值 // 改为true代表逆时针绘制 默认是false context.arc(100, 100, 100, 0, Math.PI * 2, true); // 绘制圆的填充样式 context.fillStyle = "yellow"; // 绘制圆形 context.fill(); // 结束路径 context.closePath(); } </script> </head> <body> <canvas height="600px" width="600px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
运行结果：
(4)绘制渐变
createLinearGradient(x1,y1,x2,y2)—>声明一个渐变对象
第一个参数渐变x轴开始位置
第二个参数渐变y轴开始位置
第三个参数渐变结束x轴位置
第四个参数渐变结束y轴位置案例（代码片段）：
<script> window.onload = function() { // 获取画布 var canvas = document.querySelector('canvas'); // 获取画笔 var context = canvas.getContext('2d'); // 绘制一个线性渐变图形 // 1.创建一个线性渐变对象 var l = context.createLinearGradient(0, 0, 400, 400); // 2.给渐变图形填充颜色 参数 0-1阙值填充百分比 颜色 l.addColorStop(0, 'red'); l.addColorStop(0.25, 'yellow'); l.addColorStop(0.50, 'green'); l.addColorStop(0.75, 'blue'); l.addColorStop(1, 'pink'); // 渐变对象给到图形填充样式 context.fillStyle = l; // 绘制填充图形 context.fillRect(0, 0, 400, 400) } </script> </head> <body> <canvas width="600px" height="600px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
运行结果：
(5)绘制图片
<script> window.onload=function(){ // 获取画笔 // 获取画布 var canvas=document.querySelector('canvas'); // 获取上下文 var context=canvas.getContext('2d'); // 创建img节点 绘制图片到画布中，图片dom节点，img节点绘制或者创建img节点 var img=new Image(); img.src='./2.jpg'; img.onload=function(){ // 绘制图片到画布中 从0,0点开始绘制图片，绘制一个200*200的图片 context.drawImage(img,0,0,200,200); } } </script> </head> <body> <canvas width="600px" height="600px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
(6)绘制视频
<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> </head> <body> <canvas width="600px" height="600px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
(7)绘制文字
<script> window.onload = function() { // 绘制文本 context.font = '18px bold'; // 参数 要绘制的文本 x，y context.fillText('hello world', 100, 100) context.strokeText("hello", 100, 100) } </script> </head> <body> <canvas width="400px" height="400px"></canvas> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
-
相关阅读:
MCU各种相关架构分析
paddlespeech on centos7
达摩院SPACE对话大模型：预训练语言模型，预训练对话模型，知识注入
极验--一键通过模式逆向分析
验证码绕过、密码找回漏洞
你为什么做测试/开发程序员？还能回想出来吗......
现代c++中实现精确延时方法总结
centos7 下使用docker安装常见的软件：Redis
技术干货 | 如何用MindSpore优化器加速收敛高度逼近最优值？
（54）性能分析命令
- 原文地址：https://blog.csdn.net/qq_48617322/article/details/126611087
