canvas-视频绘制

通过Canvas元素来实时绘制一个视频帧,并在视频帧上叠加一个图片的功能可以当作水印。

  1. 获取Canvas元素

    let canvas = document.getElementById('canvas')

    通过getElementById函数获取页面中ID为canvas的Canvas元素,并将其存储在变量canvas中。

  2. 检查Canvas是否支持getContext方法

    if(canvas.getContext){

    检查Canvas元素是否支持getContext方法,这是绘制图形和图像的基础。

  3. 获取2D渲染上下文

    let context = canvas.getContext('2d')

    通过Canvas的getContext方法获取一个2D渲染上下文(context),用于后续的绘图操作。

  4. 获取按钮元素

    let btn = document.getElementById('btn')

    通过getElementById函数获取页面中ID为btn的按钮元素,并将其存储在变量btn中。

  5. 创建视频元素并设置其源

    let video = document.createElement("video")
    video.src = './视频-css/横版-原神-昼.mp4'

    动态创建一个video元素,并设置其src属性为指定视频文件的路径。注意,这里使用的是相对路径。

  6. 创建并设置图片元素

    let img = new Image()
    img.src = "./视频-css/BgSub_favicon.png"

    通过new Image()创建一个新的图片元素,并设置其src属性为指定图片的路径。同样,这里使用的是相对路径。

  7. 为按钮添加点击事件监听器

    btn.onclick = function(){
    video.play()
    render()
    }

    为按钮添加了一个点击事件监听器,当按钮被点击时,会调用video.play()来播放视频,并调用render函数开始绘制。

  8. 绘制函数(render

    function render(){
    context.drawImage(video,0,0,600,300)
    context.drawImage(img,30,30,80,80)
    requestAnimationFrame(render)
    }

    render函数负责绘制操作。首先,使用context.drawImage方法将视频帧绘制到Canvas上,并指定其位置和大小(0,0,600,300)。然后,在同一Canvas上绘制图片,并指定其位置和大小(30,30,80,80)。最后,使用requestAnimationFrame(render)实现动画效果,即不断调用render函数以更新Canvas上的图像。

  •  let video = document.querySelector("video"),可以通过querySelector获取页面中的视频元素,上面的为动态创建视频元素。
  • 由于视频加载和播放可能需要一些时间,因此在实际应用中,可能需要添加一些额外的逻辑来处理视频未就绪或未播放完成的情况。例如,可以在绘制前检查视频的readyState属性,或者监听视频的loadedmetadatacanplaythrough等事件。
  • 代码中使用的相对路径(如'./视频-css/横版-原神-昼.mp4')需要确保与HTML文件相对的位置正确,否则视频将无法加载。

下面是效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/390079.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】C++11(可变参数模板、lambda表达式、包装器)

文章目录 1. 可变参数模板1.1 介绍1.2 emplace系列接口实现 2. lambda表达式2.1 语法介绍2.2 原理 3. 包装器4. bind 1. 可变参数模板 1.1 介绍 可变参数我们在C语言阶段已经了解过了,C语言中叫做可变参数列表,其中使用 ... 代表可变参数。 C语言中的可…

【给嵌入式新人的几条建议(共勉):三-C语言基础怎么补?】

给嵌入式新人的几条建议(共勉):三-C语言基础怎么补? 前言1、先回答一个问题,对C语言的害怕到底在哪?(纠正认知)2、C语言基础,要补全部吗?No2.1 先看下自己属于…

企业个人信息安全保护实践

在数字化浪潮的推动下,个人信息安全问题日益凸显,企业如何在合规的框架下保护个人信息安全,成为了一项重要课题。结合国家标准的个人信息合规审计要求,以下为企业个人信息安全保护的最佳实践路径。 一、构建合规的个人信息保护体…

【文件解析漏洞】

使用windows2003sever服务器 第一个:目录解析 1、打开网站目录,右键打开资源管理器 新建一个1.asp文件 在1.asp目录下新建一个2.txt,输入asp的语句 2、使用本机访问windows2003的IP地址 访问http://192.168.189.155/1.asp/2.txt即可 第…

论文翻译:Large Language Models in Education: Vision and Opportunities

Large Language Models in Education: Vision and Opportunities 文章目录 教育中的大型语言模型:愿景与机遇摘要1 引言2. 教育与LLMsA. 教育背景B. LLMs背景C. 智能教育D. 教育中的LLMs 3. EduLLMs的关键技术4. LLM赋能教育A. LLMs在教育中的应用B. LLMs下教育的特…

Netty4自学笔记 (3) - Netty NIO Server和Client 样例说明

全文详见个人独立博客:Netty4自学笔记 (3) - Netty NIO Server和Client 样例说明 Netty4自学笔记 (3) - Netty NIO Server和Client 样例说明更新节奏缓慢,因为每晚学习注意力不够集中,学习进展缓慢。本还给自己找了一大堆其他理由&#xff0…

适用于个人使用的十大数据恢复工具:综合指南

有许多数据恢复工具和软件可用于帮助恢复丢失或损坏的文件。通过了解您的需求并考虑这里探讨的工具,您将能够选择最佳的数据恢复软件,并希望找回您丢失的宝藏。在本综合指南中,我们将探索个人使用的十大数据恢复工具,重点介绍它们…

自定义CustomRatingBar控件

通过自定义RatingBar的样式实现⭐️⭐️⭐️指示器的方式功能过于受限,而且显示的样式阴影会受到影响。 系统自带显示: 自定义样式: 因此简单自一个符合要求的 CustomRatingBar 支持设置星星数量支持设置星星Rating(float)支持设置空显示…

NICE Seminar(2023-07-16)|演化算法的理论研究到底有什么用?(南京大学钱超教授)

模式定理(Schema Theorem) 模式定理(Schema Theorem)是遗传算法(Genetic Algorithm, GA)的重要理论基础,由约翰霍兰德(John Holland)在1975年提出。它描述了具有特定模式…

CSS mask-image 实现边缘淡出过渡效果

使用场景 在生产环境中,遇到一个需求,需要在一个深色风格的大屏页面中,嵌入 Google Maps。为了减少违和感,希望地图四边能够淡出过渡。 这里的“淡出过渡”,关键是淡出,而非降低透明度。 基于 Google Ma…

Tecplot安装error找不到指定模块之解决方案

最近有小伙伴反应,在安装Tecplot 2023版本时,参考教程来操作很顺利,但是在开启软件后,有一个error弹窗,内容如下: 随后用中英文翻译:找不到指定模块 同时,软件内部的Tool工具栏打不…

大路灯护眼灯有必要买吗?五款护眼大路灯推荐

大路灯护眼灯有必要买吗?许多消费者对护眼大路灯的了解不够,总是被不专业产品“耍”得团团转。就比如市面上很多声称用了眼睛就不近视的产品,实际上它们毫无专业技术沉淀,还疏于调校光线稳定性、光线均匀度等上百项核心参数&#…

基于IOT架构的数据采集监控平台!

LP-SCADA数据采集监控平台是蓝鹏测控推出的一款聚焦于工业领域的自动化数据采集监控系统, 助力数字工厂建设的统一监控平台。 为企业提供从下到上的完整的生产信息采集与集成服务,从而为企业综合自动化、工厂数字化及完整的"管控一体化”的解决方案…

校园水电费管理小程序的设计

管理员账户功能包括:系统首页,个人中心,学生管理,教师管理,宿舍信息管理,学生缴费管理,教师缴费管理,系统管理 微信端账号功能包括:系统首页,我的 开发系统…

抖音视频素材一般都从哪里找?抖音视频素材库分享

在浏览抖音时,你是否曾被那些内容丰富、制作精良的视频所吸引?这些视频背后的秘密其实非常简单——高质量的视频素材。优质素材能够让你的视频更加出彩。然而,许多抖音内容创作者在初期可能会困惑:这些视频素材究竟从哪里获取呢&a…

linux uos悬浮窗口置顶问题

问题背景 公司软件有一个功能,在PPT播放时,我们软件悬浮窗口需要在WPS幻灯片上层显示,方便客户操作按钮。在window 上我们设置了窗口的topmost 所以能够显示在最前面。如下图所示: 但是在软件适配国产操作系统Linux统信和麒麟在w…

推动未来的引擎:人工智能大模型的现状与发展

推动未来的引擎:人工智能大模型的现状与发展 一、引言 随着人工智能技术的迅速发展,人工智能大模型作为其中的重要组成部分,正逐渐成为推动科技进步的重要引擎。无论是在自然语言处理、计算机视觉,还是智能推荐等领域&#xff0…

Python酷库之旅-第三方库Pandas(061)

目录 一、用法精讲 236、pandas.Series.explode方法 236-1、语法 236-2、参数 236-3、功能 236-4、返回值 236-5、说明 236-6、用法 236-6-1、数据准备 236-6-2、代码示例 236-6-3、结果输出 237、pandas.Series.searchsorted方法 237-1、语法 237-2、参数 237-…

Kubernetes 学习记录

https://note.youdao.com/ynoteshare/index.html?idbc7bee305611b52d6900ba209a92bd4d&typenote&_time1694072007342 概览 K8S官网文档:https://kubernetes.io/zh/docs/home/ K8S 是Kubernetes的全称,源于希腊语,意为“舵手”或“…

江科大/江协科技 STM32学习笔记P17

文章目录 一、TIM输入捕获输入捕获与输出比较的关系频率测量测频法测周法 输入捕获的电路异或门的执行逻辑 输入捕获通道主从触发模式输入捕获基本结构PWMI基本结构输入捕获模式测频率main.c 输入捕获模式测占空比main.c 一、TIM输入捕获 输入捕获与输出比较的关系 在输出比较中…