当前位置： 首页 > news >正文

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

news 2026/4/20 4:51:35

实现的效果：可以在画布上播放动态视频，并且加上自定义的图片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>

相关文章：

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

实现的效果&#xff1a;可以在画布上播放动态视频&#xff0c;并且加上自定义的图片logo放在视频的右下角 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthd…...

编程日记 2023/10/22 15:15:30

分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BiGRU-AdaBoos…...

编程日记 2023/10/22 15:14:29

Kotlin 协程(线程)切换

常用协程切换函数 withContext 是Kotlin协程中的一个常用协程函数&#xff0c;它的作用是切换协程的执行上下文&#xff08;线程或调度器&#xff09;。具体来说&#xff0c;withContext 的主要功能如下&#xff1a; 切换执行上下文&#xff1a;withContext 允许你从一个执行上…...

编程日记 2023/10/22 15:13:27

分布式Trace：横跨几十个分布式组件的慢请求要如何排查？

目录 前言 一、问题的出现&#xff1f; 二、一体化架构中的慢请求排查如何做 三、分布式 Trace原理 四、如何来做分布式 Trace 前言 在分布式服务架构下&#xff0c;一个 Web 请求从网关流入&#xff0c;有可能会调用多个服务对请求进行处理&#xff0c;拿到最终结果。这个…...

编程日记 2023/10/22 15:11:25

【计算机毕设选题推荐】口腔助手小程序SpringBoot+Vue+小程序

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 项目名 基于SpringBoot的口腔助手小程序 技术栈 SpringBootVue小程序MySQLMaven 文章目录 一、口腔…...

编程日记 2023/10/22 15:09:22

【C/C++笔试练习】初始化列表、构造函数、析构函数、两种排序方法、求最小公倍数

文章目录 C/C笔试练习1. 初始化列表&#xff08;1&#xff09;只能在列表初始化的变量 2.构造函数&#xff08;2&#xff09;函数体赋值&#xff08;3&#xff09;构造函数的概念&#xff08;4&#xff09;构造函数调用次数&#xff08;5&#xff09;构造函数调用次数&#xff…...

编程日记 2023/10/22 15:08:22

分享 | 对 电商API 平台的再思考

API 是推动现代企业数字化转型的基础。它不但连接了内部应用程序、合作伙伴和客户&#xff0c;同时也快速持续地向市场提供了各种新产品、版本和功能。 但当下还是以集中式的 API 交付为主。一个企业的对外 API 交付过程通常都是冗余而繁琐的&#xff0c;对企业内部的敏捷性、速…...

编程日记 2023/10/22 15:06:19

C语言--程序环境和预处理

前言 本章就是c语言的最后一个板块了&#xff0c;学完这章节&#xff0c;我们将知道写出的代码如何变成可执行程序的&#xff0c;这是非常重要的一个章节&#xff0c;那让我们一起进入本章的学习吧。 本章重点&#xff1a; 程序的翻译环境程序的执行环境详解&#xff1a;C语言程…...

编程日记 2023/10/22 15:05:18

深度学习笔记_5 经典卷积神经网络LeNet-5 解决MNIST数据集

1、定义LeNet-5模型&#xff0c;包括卷积层和全连接层。 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms# 导入必要的库# 定义 LeNet-5 模型 class LeNet5(nn.Module):def __init__(self):super(LeNet5, self…...

编程日记 2023/10/22 15:03:16

国内智能客服机器人都有哪些？

随着人工智能技术的不断发展&#xff0c;智能客服机器人已经成为了企业客户服务的重要工具。国内的智能客服机器人市场也迎来了飞速发展&#xff0c;越来越多的企业开始采用智能客服机器人来提升客户服务效率和质量。 在这篇文章中&#xff0c;我将详细介绍国内知名的智能客服机…...

编程日记 2023/10/22 15:02:15

Matlab/C++源码实现RGB通道与HSV通道的转换（效果对比Halcon）

HSV通道的含义 HSV通道是指图像处理中的一种颜色模型&#xff0c;它由色调&#xff08;Hue&#xff09;、饱和度&#xff08;Saturation&#xff09;和明度&#xff08;Value&#xff09;三个通道组成。色调表示颜色的种类&#xff0c;饱和度表示颜色的纯度或鲜艳程度&#xf…...

编程日记 2023/10/22 15:01:15

【C进阶】动态内存管理

一、为什么存在动态内存分配 我们之前学的都是开辟固定大小的空间&#xff0c;但有时候需要空间的大小只有在程序运行时才能知道&#xff0c;那么就引入了动态内存开辟 内存分布所在&#xff1a; 二、动态内存函数的介绍 2.1malloc和free 动态内存开辟的函数 void * malloc…...

编程日记 2023/10/22 15:00:13

神经网络的梯度优化方法

神经网络的梯度优化是深度学习中至关重要的一部分&#xff0c;它有助于训练神经网络以拟合数据。下面将介绍几种常见的梯度优化方法&#xff0c;包括它们的特点、优缺点以及原理。 梯度下降法 (Gradient Descent): 特点: 梯度下降是最基本的优化算法&#xff0c;它试图通过迭代…...

编程日记 2023/10/22 14:58:10

linux 装机教程（自用备忘）

文章目录 安装 pyenv 管理多版本 python 环境安装使用使用 pyenv 和 virtualenv 管理虚拟 python 环境 vscode 连接远程服务器tmux 美化zsh 安装 pyenv 管理多版本 python 环境 安装 &#xff08;教程参考&#xff1a;https://www.modb.pro/db/155036&#xff09; sudo apt-…...

编程日记 2023/10/22 14:57:09

Tensorboard安装及简单使用

Tensorboard 1. tensorboard 简单介绍2. 安装必备环境3. Tensorboard安装4. 可视化命令 1. tensorboard 简单介绍 TensorBoard是一个可视化的模块&#xff0c;该模块功能强大&#xff0c;可用于深度学习网络模型训练查看模型结构和训练效果&#xff08;预测结果、网络模型结构…...

编程日记 2023/10/22 14:56:08

SpringCloud 微服务全栈体系（二）

第三章 Eureka 注册中心 假如我们的服务提供者 user-service 部署了多个实例&#xff0c;如图&#xff1a; 思考几个问题&#xff1a; order-service 在发起远程调用的时候&#xff0c;该如何得知 user-service 实例的 ip 地址和端口&#xff1f;有多个 user-service 实例地址…...

编程日记 2023/10/22 14:54:06

flutter 常用组件：列表ListView

文章目录 总结#1、通过构造方法直接构建 ListView 提供了一个默认构造函数 ListView，我们可以通过设置它的 children 参数，很方便地将所有的子 Widget 包含到 ListView 中。 不过，这种创建方式要求提前将所有子 Widget 一次性创建好，而不是等到它们真正在屏幕上需要显示时才…...

编程日记 2023/10/22 14:53:05

十四天学会C++之第七天：STL（标准模板库）

1. STL容器 什么是STL容器&#xff0c;为什么使用它们。向量&#xff08;vector&#xff09;&#xff1a;使用向量存储数据。列表&#xff08;list&#xff09;&#xff1a;使用列表实现双向链表。映射&#xff08;map&#xff09;&#xff1a;使用映射实现键值对存储。 什么…...

编程日记 2023/10/22 14:52:04

Linux 下安装 miniconda，管理 Python 多环境

安装 miniconda 1、下载安装包 Miniconda3-py37_22.11.1-1-Linux-x86_64.sh&#xff0c;或者自行选择版本 2、把安装包上传到服务器上&#xff0c;这里放在 /home/software 3、安装 bash Miniconda3-py37_22.11.1-1-Linux-x86_64.sh 4、按回车 Welcome to Miniconda3 py37…...

编程日记 2023/10/22 14:51:03

Django和jQuery，实现Ajax表格数据分页展示

1.需求描述 当存在重新请求接口才能返回数据的功能时&#xff0c;若页面的内容很长&#xff0c;每次点击一个功能&#xff0c;页面又回到了顶部&#xff0c;对于用户的体验感不太友好&#xff0c;我们希望当用户点击这类的功能时&#xff0c;能直接加载到数据&#xff0c;请求…...

编程日记 2023/10/22 14:50:02

Unity URP 实战：基于Kajiya-Kay与Marschner的头发着色器深度解析

1. 头发渲染为什么这么难&#xff1f; 第一次尝试做头发渲染的时候&#xff0c;我对着屏幕发呆了整整一天。为什么游戏里的头发看起来总是那么假&#xff1f;这个问题困扰了我很久。后来才发现&#xff0c;头发的光学特性比我们想象中复杂得多 - 每根头发实际上是个微型圆柱体&…...

编程新知 2026/4/20 4:48:38

Shared Control【共享控制】- 基于隐式动作学习的辅助机器人直觉化操控

1. 从游戏手柄到机械臂&#xff1a;为什么我们需要共享控制&#xff1f; 想象一下用游戏手柄操控一台工业机械臂的场景。手柄只有两个摇杆和几个按钮&#xff0c;而机械臂可能有7个自由度甚至更多。这种维度不匹配就像让只会说"左转""右转"的人去指挥一个能…...

编程新知 2026/4/20 4:05:29

技术揭秘：如何构建Unity URP高性能卡通渲染着色器

技术揭秘&#xff1a;如何构建Unity URP高性能卡通渲染着色器 【免费下载链接】UnityURPToonLitShaderExample A very simple toon lit shader example, for you to learn writing custom lit shader in Unity URP 项目地址: https://gitcode.com/gh_mirrors/un/UnityURPToon…...

编程新知 2026/4/20 3:29:02

如何快速融入Kolors开源社区：完整贡献指南与技术支持体系

如何快速融入Kolors开源社区&#xff1a;完整贡献指南与技术支持体系 【免费下载链接】Kolors Kolors Team 项目地址: https://gitcode.com/gh_mirrors/ko/Kolors Kolors是由快手Kolors团队开发的大规模文本到图像生成模型&#xff0c;基于潜在扩散技术&#xff0c;在数…...

编程新知 2026/4/20 3:22:54

从 0 到 1 构建销售 AI Agent Harness Engineering：线索生成、客户画像与转化预测实战

从0到1落地销售AI Agent Harness Engineering体系：线索生成、客户画像与转化预测全栈实战 关键词 销售AI Agent、Harness Engineering、线索智能生成、动态客户画像、转化预测、LLM编排、销售流程自动化 摘要 当前国内企业销售团队普遍面临「30%时间浪费在无效线索挖掘、客…...

编程新知 2026/4/20 2:41:35

易语言实现圆弧长度计算

在易语言中计算圆弧长度&#xff0c;尤其是基于凸度&#xff08;Bulge&#xff09;和端点坐标的实现&#xff0c;需要将几何公式转换为具体的代码逻辑。以下是针对不同已知条件的详细实现方法&#xff0c;特别是凸度与端点场景。 一、 核心几何公式与易语言实现基础 圆弧长度…...

编程新知 2026/4/20 1:44:32

抖音无水印批量下载终极指南：告别录屏，轻松获取高清内容

抖音无水印批量下载终极指南&#xff1a;告别录屏&#xff0c;轻松获取高清内容 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser f…...

编程新知 2026/4/20 0:22:48

ADS 2023 保姆级教程：从巴特沃斯到椭圆，手把手仿真你的第一个低通滤波器

ADS 2023 实战指南&#xff1a;三步完成低通滤波器设计与仿真 刚打开ADS软件时&#xff0c;那些密密麻麻的工具栏和陌生的术语确实容易让人望而生畏。但别担心&#xff0c;现代EDA工具早已将复杂的滤波器设计过程封装成了可视化操作。就像用智能手机拍照不需要理解图像传感器原…...

编程新知 2026/4/20 0:20:45

服务器CPU被Powershell.exe吃满？别慌，手把手教你揪出WMI里的挖矿脚本

服务器CPU被Powershell.exe吃满&#xff1f;深度排查与根治WMI挖矿脚本实战指南 当你发现服务器监控面板上CPU使用率突然飙升至90%以上&#xff0c;而罪魁祸首竟是Powershell.exe进程时&#xff0c;这绝非偶然的系统资源波动。作为运维人员&#xff0c;我们需要立即意识到&…...

编程新知 2026/4/20 0:01:52

如何分析RAC启动挂起_crond与ohasd进程启动依赖链排查

ohasd.bin 启动卡住时&#xff0c;应先删除残留的 /var/tmp/.oracle/npohasd 管道文件&#xff0c;再执行 crsctl start crs&#xff1b;需确认目录权限正确、检查 ohasd.log 与 ocssd.log 中超时及磁盘识别问题&#xff0c;并验证 crsctl check has 状态是否为 online。ohasd.…...

编程新知 2026/4/19 23:59:51