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

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文件相对的位置正确,否则视频将无法加载。

下面是效果图

相关文章:

canvas-视频绘制

通过Canvas元素来实时绘制一个视频帧,并在视频帧上叠加一个图片的功能可以当作水印。 获取Canvas元素: let canvas document.getElementById(canvas) 通过getElementById函数获取页面中ID为canvas的Canvas元素,并将其存储在变量canvas中。 …...

红酒与美食搭配:味觉的新探索

在美食的世界里,红酒如同一位优雅的舞者,与各种佳肴共舞,创造出无尽的味觉惊喜。当定制红酒洒派红酒(Bold & Generous)与各式美食相遇,便开启了一场味觉的新探索之旅。 一、红酒与美食的邂逅&#xff…...

大模型日报 2024-08-02

大模型日报 2024-08-02 大模型资讯 博思艾伦在国际空间站部署先进语言模型 摘要: 博思艾伦在国际空间站上的超级计算机上运行了一种生成式人工智能大型语言模型。这一举措标志着语言模型在太空应用方面的重大进展。 人工智能助力研发安全有效的新型抗生素对抗耐药细菌 摘要: 德…...

【Pytorch】一文向您详细介绍 torch.sign()

🎉🧠**【Pytorch】一文向您详细介绍 torch.sign()** 下滑即可查看博客内容 🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地!🎇 🎓 博主简介&#xff…...

超级详细,如何手动安装python第三方库?

文章目录 1,python第三方库安装包有3种类型2,python第三方库安装包whl文件如何安装?3,python第三方库安装包zip和tar.gz文件如何安装?4, python第三方库安装包exe文件如何安装? 手动安装第三方库…...

WebSocket协议测试

WebSocket和HTTP接口有什么不一样 websocket和http都是网络接口数据交换的协议。都是基于TCP 协议区别 http:每次数据交互都是一个全新的请求;主动发起http请求调用(非实时) websocket:建立长久网络连接,服务器/客户端可以相互主动发数据…...

浅谈【C#】代码注册COM组件

在C#中注册COM组件通常涉及到使用regasm工具或者在代码中使用System.Runtime.InteropServices命名空间下的RegisterTypeForComClients方法。 下面是两种方法的简要说明和示例: 1、使用 regasm 工具 regasm 是一个命令行工具,用于将.NET程序集注册为CO…...

C++数据结构学习(顺序表)

文章目录 顺序表杭州电子科技大学在线评测2008 数值统计使用顺序表实现 2014 青年歌手大奖赛_评委会打分 Leetcode题目[LCP 01. 猜数字](https://leetcode.cn/problems/guess-numbers/description/)[LCP 06. 拿硬币](https://leetcode.cn/problems/na-ying-bi/description/)[20…...

springboot宠物用品商城系统-前端-计算机毕业设计源码74346

摘要 基于微信小程序的宠物用品商城系统是一个集商品展示、在线购物、支付结算、用户管理等功能于一体的综合性电商平台。该系统充分利用微信小程序的便捷性和用户基础,为宠物爱好者提供了一个方便、快捷的购物体验。 同时,该系统还具备完善的用户管理功…...

【vue预览PDF文件的几种方法】

vue展示PDF文件的几种方法 使用Vue插件 你需要安装vue-pdf-embed: npm install vue-pdf-embed<template><div class"pdf-container"><VuePdfEmbed :src"pdfUrl" /></div> </template><script setup lang"ts"…...

学习安卓开发遇到的问题(未解决版,有没有人帮我看看,大哭,感谢)

问题1&#xff1a;学习禁用与恢复按钮中&#xff1a; java代码报错&#xff1a;报错代码是 R.id.btn_enable;case R.id.btn_disable;case R.id.btn_test: 代码如下&#xff1a;&#xff08;实现功能在代码后面&#xff09; package com.example.apptest;import static java.…...

C++必修:STL之vector的模拟实现

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 为了让我们更加深入理解vector&#xff0c;接下来我们将模拟实现一个简易版的vect…...

Unity Camera

课程目标 1. 了解摄像机&#xff08;camera&#xff09;不同视角的设计与实现&#xff1b;2. 感受在不同摄像机视角下观察虚拟场景。 喜欢玩游戏或者看3D动漫的朋友可以回忆在虚拟场景中摄像头的运动变化带来的视觉感受&#xff0c;例如&#xff1a;摄像头给场景中的主角来个…...

CSS雷达光波效果(前端雷达光波效果)

前言 CSS雷达光波效果是一种视觉动画效果&#xff0c;常用于模仿雷达扫描或检测的视觉反馈。这种效果通常涉及到动态的圆形或弧形图案&#xff0c;它们从一个中心点向外扩散&#xff0c;类似于水面上的涟漪或雷达扫描线。以下是创建CSS雷达光波效果的一些关键技术和步骤&#…...

【C语言】【数据结构】冒泡排序及优化

一、算法思想 冒泡排序是一种简单的排序算法。一次从前往后地走访待排序的元素序列被称为一趟&#xff0c;每一趟都会把相邻的两个元素的错误顺序交换&#xff0c;将当前趟次中最大或者最小的元素像“冒泡泡”一样冒到最后面&#xff0c;反复地走访元素序列&#xff0c;直到所有…...

3种 Ajax 方式:原生、jQuery、axios

毋庸多言&#xff0c;Ajax 技术在网页中是划时代的进步。学会它&#xff0c;可以说掌握了一招半式&#xff0c;不再是门外汉了。 这里将 3 种 Ajax 方式一并呈上。 感谢 https://run.uv.cc/ 平台&#xff0c;以及 /api 接口 https://andi.cn/page/621639.html https://andi…...

Node.js 根据表结构动态生成目标代码

文章目录 前言项目背景使用的技术栈步骤一&#xff1a;设置 Node.js 项目步骤二&#xff1a;连接 SQL Server 数据库步骤三&#xff1a;查询数据库表结构步骤四&#xff1a;生成模板代码步骤五&#xff1a;整合所有功能总结 前言 在现代的前端开发中&#xff0c;使用 Vue3 搭配…...

渗透测试实战—云渗透(AK/SK泄露)

免责声明&#xff1a;文章来源于真实渗透测试&#xff0c;已获得授权&#xff0c;且关键信息已经打码处理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本…...

【机器学习】机器学习与医疗健康在疾病预测中的融合应用与性能优化新探索

文章目录 引言第一章&#xff1a;机器学习在医疗健康中的应用1.1 数据预处理1.1.1 数据清洗1.1.2 数据归一化1.1.3 特征工程 1.2 模型选择1.2.1 逻辑回归1.2.2 决策树1.2.3 随机森林1.2.4 支持向量机1.2.5 神经网络 1.3 模型训练1.3.1 梯度下降1.3.2 随机梯度下降1.3.3 Adam优化…...

MySQL(8.0)数据库安装和初始化以及管理

1.MySQL下载安装和初始化 1.下载安装包 下载地址&#xff1a;https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2.解压…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...