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环境

自然语言处理---Transformer机制详解之BERT GPT ELMo模型的对比

1 BERT、GPT、ELMo的不同点 关于特征提取器: ELMo采用两部分双层双向LSTM进行特征提取, 然后再进行特征拼接来融合语义信息.GPT和BERT采用Transformer进行特征提取.很多NLP任务表明Transformer的特征提取能力强于LSTM, 对于ELMo而言, 采用1层静态token embedding 2层LSTM, 提取…

IT行业就业方向:探索未来的职业机会

引言&#xff1a; 随着信息技术的飞速发展&#xff0c;IT行业已经成为了当前最具活力和发展潜力的行业之一。在这个充满机遇和挑战的时代&#xff0c;选择一个好的就业方向对于个人的职业发展至关重要。本文将探讨IT行业中哪些方向具有更好的就业前景&#xff0c;并提供一些建…

云原生之深入解析如何使用Vcluster Kubernetes加速开发效率

一、背景 为什么一个已经在使用 Kubernetes 本身方面已经很挣扎的开发人员还要处理虚拟集群呢&#xff1f;答案可能会让您感到惊讶&#xff0c;但我相信虚拟集群实际上比单独的物理集群更容易处理&#xff0c;并且与本地 k3d、KinD 或 minikube 部署的集群相比具有相当多的优势…

node教程(二)

文章目录 1.模块化1.1模块化介绍1.2模块化初体验1.3模块暴露数据(&#x1f53a;)1.4引入&#xff08;导入&#xff09;模块 1.模块化 1.1模块化介绍 ⭐什么是模块化与模块&#xff1f; 将一个复杂的程序文件依据一定规则&#xff08;规范&#xff09;拆分成多个文件的过程称之…

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…

递增的三元子序列

给你一个整数数组 nums &#xff0c;判断这个数组中是否存在长度为 3 的递增子序列。 如果存在这样的三元组下标 (i, j, k) 且满足 i < j < k &#xff0c;使得 nums[i] < nums[j] < nums[k] &#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示…

头脑风暴之约瑟夫环问题

一 问题的引入 约瑟夫问题的源头完全可以命名为“自杀游戏”。本着和谐友爱和追求本质的目的&#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…