canvas绘制动态视频并且在视频上加上自定义logo

实现的效果:可以在画布上播放动态视频,并且加上自定义的图片logo放在视频的右下角

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>绘制视频</title></head><body><div>绘制视频</div><canvas id="myCanvas" width="500" height="350"></canvas><button id="player" style="display: block">暂停/播放</button><script>// 获取画布const canvas = document.getElementById('myCanvas')// 获取画笔const ctx = canvas.getContext('2d')// 获取视频// const video = document.querySelector('video')const video = document.createElement('video')video.src = './assets/video.mp4'const logo = new Image()logo.src = './assets/ball.png'// 获取按钮const btn = document.querySelector('#player')btn.onclick = () => {// 判断视频是否在播放if (video.paused) {video.play()} else {video.pause()}renderVideo()}// 绘制视频const renderVideo = () => {// 绘制视频ctx.drawImage(video, 0, 0, 500, 350)// 还可以继续绘制一个logo// ctx.drawImage(logo, 460, 320, 40, 30)requestAnimationFrame(renderVideo)}</script></body>
</html>

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

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

相关文章

找不到conda可执行文件:解决方法

1.在新版本的pycharm出现的问题如下&#xff1a; 2.解决方法: 2.1 将anaconda\Scripts\conda.exe选中 2.2选择自己的anconda自己的环境&#xff0c;之后就可以正常创建conda环境

python 之numpy 之随机生成数

文章目录 1. **生成均匀分布的随机浮点数**&#xff1a;2. **生成随机整数**&#xff1a;3. **生成标准正态分布随机数**&#xff1a;4. **生成正态分布随机数**&#xff1a;5. **生成均匀分布的随机浮点数**&#xff1a;6. **生成随机抽样**&#xff1a;7. **设置随机数种子**…

Axi_Lite接口的IP核与地址与缓冲与AxiGP0

AXI Interconnect互连内核将一个或多个 AXI 内存映射主设备连接到一个或多个内存映射从设备。 AXI_GP 接口 AXI_GP 接口是直接连接主机互联和从机互联的端口的。 AXI_HP 接口具有一个 1kB 的数据 FIFO 来做缓冲 [4]&#xff0c;但是 AXI_GP 接口与它不同&#xff0c;没…

24东北大学计算机计划招生数据

2.结语 24的保研名额很多&#xff0c;统考名额就这些&#xff0c;大家根据自己的情况做出选择 东大计算机不好考&#xff0c;但是不代表考不上&#xff01;加油 3.数据来源于官网 官网链接

从传统云架构到云原生生态体系架构的演进

文章目录 概述传统云架构&#xff1a;虚拟化的时代云原生生态体系架构的兴起容器化和微服务架构自动化和自动伸缩基础设施即代码云原生存储和数据库 云原生的影响结语 概述 随着科技的不断发展&#xff0c;云计算领域也经历了巨大的变革。这一演进的核心焦点是从传统云架构过渡…

【Java集合类面试七】、 JDK7和JDK8中的HashMap有什么区别?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;JDK7和JDK8中的HashMap有…

pyflink 环境测试以及测试案例

1. py 的 环境以来采用Anaconda环境包 安装版本&#xff1a;https://www.anaconda.com/distribution/#download-section Python3.8.8版本&#xff1a;Anaconda3-2021.05-Linux-x86_64.sh 下载地址 https://repo.anaconda.com/archive/ 2. 安装 bash Anaconda3-2021.05-Linux-x…

基于深度学习网络的蔬菜水果种类识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1数据集准备 4.2构建深度学习模型 4.3模型训练 4.4模型评估 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 clc; clear; close all; wa…

java基础面试题

java后端面试题大全 1.java基础1.1 java中和equals的区别1.2 String、StringBuffer、StringBuilder的区别1.3 intern方法的作用及原理1.4 String不可变的含义1.5 static用法、使用位置、实例1.6 为什么静态方法不能调用非静态方法和变量1.7 异常/Exception1.7 try/catch/finall…

【CNN-LSTM预测】基于卷积神经网络-长短期记忆网络的数据分类预测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

头脑风暴之约瑟夫环问题

一 问题的引入 约瑟夫问题的源头完全可以命名为“自杀游戏”。本着和谐友爱和追求本质的目的&#xff0c;可以把问题描述如下&#xff1a; 现有n个人围成一桌坐下&#xff0c;编号从1到n&#xff0c;从编号为1的人开始报数。报数也从1开始&#xff0c;报到m人离席&#xff0c…

YOLOv5项目实战(1)— 如何去训练模型

前言:Hello大家好,我是小哥谈。YOLOv5基础知识入门系列、YOLOv5源码中的参数超详细解析系列、YOLOv5入门实践系列、YOLOv5论文作图教程系列和YOLOv5算法改进系列学习完成之后,接着就进入YOLOv5项目实战系列了。🎉为了让大家能够牢固地掌握YOLOv5算法,本系列文章就通过一个…

计算机算法分析与设计(18)---回溯法(介绍、子集和问题C++代码)

文章目录 一、回溯法介绍二、子集和问题2.1 知识概述2.2 代码编写 一、回溯法介绍 1. 回溯法&#xff08;back tracking&#xff09;是一种选优搜索法&#xff0c;又称为试探法&#xff0c;有“通用的解题法”之称&#xff0c;按选优条件向前搜索&#xff0c;以达到目标。但当探…

AIGC笔记--基于DDPM实现图片生成

目录 1--扩散模型 2--训练过程 3--损失函数 4--生成过程 5--参考 1--扩散模型 完整代码&#xff1a;ljf69/DDPM 扩散模型包含两个过程&#xff0c;前向扩散过程和反向生成过程。 前向扩散过程对一张图像逐渐添加高斯噪声&#xff0c;直至图像变为随机噪声。 反向生成过程…

C语言求 3*3 矩阵对角线之和

完整代码&#xff1a; // 求 3*3 矩阵对角线之和 #include<stdio.h>int main() {int n3;int arr[3][3];// 输入矩阵printf("请输入矩阵的元素:\n");for (int i 0; i < n; i){for (int j 0; j < n; j){scanf("%d", &arr[i][j]);}}int su…

Python+requests+pytest+excel+allure 接口自动化测试实战

定义&#xff1a; Unittest是Python标准库中自带的单元测试框架&#xff0c;Unittest有时候也被称为PyUnit&#xff0c;就像JUnit是Java语言的标准单元测试框架一样&#xff0c;Unittest则是Python语言的标准单元测试框架。 Pytest是Python的另一个第三方单元测试库。它的目的…

day03_pandas_demo

文章目录 pandas介绍为什么使用pandasDataFrameDataFrame属性DataFrame的索引修改行列的索引值重设索引值以某列设置新索引 MultiIndexSerias索引操作直接索引按名字索引按数值索引 赋值操作排序对内容排序按索引排序 DataFrame的运算算术运算逻辑运算逻辑运算符号 < > |…

代码随想录 Day26 贪心 01 全集 LeetCode455 分发饼干 LeetCodeT346摆动序列 LeetCdoe T53 最大子数组和

前言:贪心无套路 本质: 局部最优去推导全局最优 两个极端 贪心算法的难度一般要么特别简单,要么特别困难,所以我们只能多见识多做题,记住无需数学证明,因为两道贪心基本上毫无关系,我们只需要去思考局部最优即可 贪心的小例子 比如有一堆钞票&#xff0c;你可以拿走十张&#x…

SpringBoot AOP + Redis 延时双删功能实战

一、业务场景 在多线程并发情况下&#xff0c;假设有两个数据库修改请求&#xff0c;为保证数据库与redis的数据一致性&#xff0c;修改请求的实现中需要修改数据库后&#xff0c;级联修改Redis中的数据。 请求一&#xff1a;A修改数据库数据 B修改Redis数据 请求二&#xff…

谷歌真的不喜欢 Node.js ?

有人在 Quora 上提问&#xff0c;为什么谷歌不喜欢 Node.js 呢&#xff0c;Google 的 UX 工程师和来自 Node.js 团队的开发者分别回答了他们对这个问题的看法&#xff0c;对于编程语言来说&#xff0c;每一门语言都有它自己的优势&#xff0c;重要的是如何用它去解决问题。 谷…