Html5API（自定义属性、媒体元素、canvas画布）（一）

最新推荐文章于 2024-08-16 10:59:26 发布
最新推荐文章于 2024-08-16 10:59:26 发布
阅读量417 收藏 2
点赞数
分类专栏： # js 文章标签： html5 媒体 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48617322/article/details/126611087
版权

文章目录

一、自定义属性

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.video

  • 属性
    controls 进度条
    autoplay 自动播放
    loop 循环播放
    muted 静音播放
    poster 设置封面
    src 设置视频路径资源
    width 宽度
    height 高度
  <video src="../视频/1.mp4" width="400px" controls loop muted poster="../封面.jpg" loop></video>
  • 方法
    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.audio

audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致.

   <!-- 音视频 不加进度条相当于背景音乐-->
    <audio src="../音视频/1.mp3" autoplay loop controls></audio>

三、画布

canvas元素默认具有高宽
width： 300px
height：150px

<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形，使用标签时，建议要成对出现，不要使用闭合的形式。

 <canvas height="400px" width="400px"></canvas>

1.基本使用

(1)获取canvas对象–获取画布

  var canvas = document.querySelector('canvas');

(2)取得上下文(context)–获取画笔
图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”

 var context = canvas.getContext('2d');

(3)定义样式

 //设置图形的填充颜色
 context.fillStyle='red';
 //设置图形轮廓的颜色
 context.strokeStyle='red';
 //设置当前绘线的粗细,必须为正数
 context.lineWidth =3;

(4)绘制填充图形

context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

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>

运行结果：
在这里插入图片描述

(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>

运行结果：
在这里插入图片描述

(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>

运行结果：
在这里插入图片描述

(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>

运行结果：
在这里插入图片描述

(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>
(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>
(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>
Nyingchi-X
关注
专栏目录
HTML5 Canvas（画布）
shou_ren_bai_bu的博客
08-03 312
简单来说，是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。MDN是一个可以使用脚本 (通常为JavaScript) 来绘制图形的HTML元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。
HTML5API&入门教程
11-11
HTML5.chm中文帮助文档API，《HTML5从入门到精通》中文学习教程.pdf教程，《HTML 5 教程.pdf》教程。 HTML 5 简介 HTML 5 视频 HTML 5 音频 HTML 5 Canvas HTML 5 Web 存储 HTML 5 Input 类型 HTML 5 表单元素 HTML 5 表单属性 HTML 5 参考手册 HTML 5 标准属性 HTML 5 事件属性 HTML 5 标签
HTML5 Canvas API详解
weixin_34302798的博客
02-10 354
HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图...
HTML5 语音 API 入门指南（一）
最新发布
龙哥盟
08-16 678
嘿 Alexa，几点了…？在一个智能助理(SA)设备的时代，我敢打赌，这些话在世界范围内每天都会被说上几十次——无论在哪里；智能助手变得非常受欢迎。事实上，Juniper Research 预测，智能助理的数量将从 2018 年底的 25 亿增加到 2023 年的 80 亿。想象一下——通过语音改变电视频道(已经成为可能，仅这一项就有望在未来五年内增长 120%)或者只是做一些平凡的事情，比如从亚马逊之类的网站重新订购商品。但是我跑题了。
H5新API
qq_57104988的博客
08-30 406
context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高。// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置。 3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法。...
5 个强大的HTML5 API
低調的華麗
08-24 762
HTML5提供了一些非常强大的JavaScript和HTML API，来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API，希望对你的开发工作有所帮助。1. 全屏API（Fullscreen API）　　该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。 // 找到适合浏览器的全屏方法functionlaunchFullScreen(elem
html5 canvas API
github_38186390的博客
07-18 274
一。canvas 是一个html 标签。必须先设置其 width 和 height 属性，指定可以绘图的区域大小。width、height、css可以随便的修改。主要用于2D 绘图。画图操作必须先设置颜色，然后画线。所有以 fill 开头的API 都只能使用fillStyle 属性填充颜色，以stroke 开头的 API 都只能使用strokeStyle 属性进行描边。 二。API说明：这...
Android 自定义画布canvas 实现绘制和清空画布功能
10-21
在Android开发中，自定义画布Canvas是实现图形绘制的核心工具。...总之，自定义画布Canvas是Android图形界面开发中不可或缺的一部分，通过熟练掌握其用法，可以实现各种复杂而富有创意的视觉效果。
JavaScript html5 canvas画布中删除一个块区域的方法
10-22
总结来说，要删除HTML5 Canvas画布上的一个块区域，主要依赖于 `clearRect` 方法，配合其他辅助函数和Canvas API提供的绘图工具，可以实现复杂的图形操作。这个过程涉及到JavaScript编程，HTML5 Canvas API 的理解和...
html5基于sonic.js创建canvas画布正在加载图标样式源码.zip
11-04
在这个"html5基于sonic.js创建canvas画布正在加载图标样式源码.zip"压缩包中，我们可以找到利用HTML5的Canvas元素和sonic.js库来构建动态加载图标样式的源代码。 Canvas是HTML5中的一个核心特性，它提供了一个二维...
canvas:用于从 Java 代码绘制到画布的 API，以及 JavaFX 和 HTML5 的实现
06-28
HTML5的Canvas元素是Web开发中的一个重要特性，它为网页提供了一个可编程的画布，允许JavaScript代码进行图形绘制。HTML5 Canvas通过JavaScript API提供了丰富的绘图命令，如`ctx.fillRect()`, `ctx.beginPath()`, `...
html5的API
fs821031547的博客
10-26 608
以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。 页面可见性API--page Visbility 全屏API --full Screen 获取MediaAPI--getUserMedia 电池API --battery 资源预加载API--link Prefetching Page Visibility 页面可见性A
html5API
我的征程
07-29 296
手机端API http://www.html5plus.org/doc/zh_cn/camera.html
html5 的API
Dzq_Boyka的博客
08-25 447
原文：http://www.iteye.com/news/26489 1.  全屏API（Fullscreen API）  该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。  Javascript代码  // 找到适合浏览器的全屏方法   function launchFullScreen(element) 
HTML5的API（一）
cifu7520的博客
07-05 112
API，简单来讲就是接口。 DOM是html给js的接口，BOM是浏览器给html的接口。 列举下HTML5中的API： 1.canvas(具体内容见：https://my.oschina.net/u/3502371/blog/1058178) 2.SVG 指可伸缩矢量图形，可在任何的...
JavaScript基础学习——HTML5 API
qq_41890177的博客
03-15 312
一、媒体操作 1、audio（音频） 支持的音频格式：.mp3/.ogg/.webm 标签常用属性： autoplay autoplay 自动播放（IE9以下不支持，IE可以支持自动播放，谷歌有些版本不支持自动播放） controls controls 控制条 loop loop 循环 preload preload 预加载（设置autoplay时，preload失效） src url ...
HTML5 API --- Screen Orientation API简介
HTML5, Chromium和WebKit技术
02-16 8966
[本文属原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/] 在移动平台的游戏中，我们经常需要通过倾斜或旋转移动设备来控制游戏中的元素，例如赛车游戏中我们需要左右倾斜来控制赛车的左右转向，神庙逃亡游戏中我们同样需要左右倾斜移动设备来控制人物行走位置的方向。设想一下，如果设备的倾斜让游戏画面产生旋转，游戏画面需要重绘来适应屏幕尺寸的改变，那对游
html5之api,HTML5之API(示例代码)
weixin_42379854的博客
06-11 560
HTML5就是牛，可以直接播放音视频，还可以作图；一、HTML5中播放视频和音频：加载时直接播放音频的方式：new Audio("BY2.mp3").play();播放器视频音频var video = $("#mp")[0];video.play();简单播放器二、可伸缩的矢量图形SVG：Scalable Vector Graphics: 可伸缩Scalable是因为画的图是分辨率无关的;一个简...
应用html5画布Apicss制作,html5之canvasAPI
weixin_33664191的博客
06-18 143
获取canvas对象varcanvas=document.getElementById("myCanvas");varcontext=canvas.getContext("2d");利用context来绘制canvas属性fillStyle 填充样式strokeStyle 填充边框样式lineWidth 指定线宽globalCompositeOperation 设置图形的组合方式。s...
HTML5 Canvas 2D API 规范详解
HTML5 Canvas 2D API 规范1.0中文版是一个详细介绍如何在Web页面上使用HTML5 Canvas元素进行2D图形绘制的文档。这个规范由W3C编辑于2009年10月21日，并由CodeEx.CN翻译成中文。文档内容涵盖了Canvas接口元素的定义、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值