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

通过HTML Canvas 在图片上绘制文字

news 来源：原创 2025/5/16 18:57:33

前言

一、HTML Canvas 简介

二、准备工作

三、绘制图片

四、绘制文字

五、完整代码

效果演示：

前言

HTML canvas 为我们提供了无限的创意可能性。今天，我们就来探索一下如何通过 HTML canvas 将图片和文字绘制到图片上，创造出独特而富有个性的视觉效果。

一、HTML Canvas 简介

HTML canvas 是一个可以使用 JavaScript 在网页上绘制图形的元素。它提供了一组强大的绘图 API，可以让我们绘制各种形状、图像和文本。通过 canvas，我们可以实现动态的图形效果，为网页增添生动和交互性。

二、准备工作

首先需要在 HTML 页面中创建一个 canvas 元素。可以使用以下代码：

var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;

然后，在 JavaScript 中获取 canvas 元素和绘图上下文：

// 获取上下文对象var ctx = canvas.getContext("2d");

三、绘制图片

1.加载图片

首先，我们需要加载要绘制到 canvas 上的图片。可以使用 Image 对象来加载图片，并在图片加载完成后进行绘制。

<img id="resultImage" src="12images/wz.png" alt="结果图片" title="123">image.onload = function() {}

2.绘制图片到 canvas

当图片加载完成后，我们可以使用 drawImage 方法将图片绘制到 canvas 上。

// 将图片绘制到画布上ctx.drawImage(image, 0, 0);

四、绘制文字

1.设置文字样式

在绘制文字之前，我们可以设置文字的样式，包括字体、字号、颜色等。

// 设置文本样式ctx.font = "24px Arial";ctx.fillStyle = "black";

2.绘制文字到 canvas

使用 fillText 方法可以将文字绘制到 canvas 上。

// 将文本绘制到画布上ctx.fillText(inputText, 40, 50); // 指定文本的位置

五、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="textInput"><button onclick="addTextToImage()">将文本添加到图片</button><img id="resultImage" src="12images/wz.png" alt="结果图片" title="123"><div id="wz"></div><script type="text/javascript">function addTextToImage() {var inputText = document.getElementById("textInput").value; // 获取输入框的值console.log(inputText);// 创建一个新的图片对象var image = new Image();image.src = "images/weizhi.png"; // 图片的路径// 当图片加载完成后执行操作image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;// 获取上下文对象var ctx = canvas.getContext("2d");// 将图片绘制到画布上ctx.drawImage(image, 0, 0);// 设置文本样式ctx.font = "24px Arial";ctx.fillStyle = "black";// 将文本绘制到画布上ctx.fillText(inputText, 40, 50); // 指定文本的位置// 将画布中的内容存储为图片var resultImage = document.getElementById("resultImage");resultImage.src = canvas.toDataURL("image/jpeg");};}</script></body>
</html>

效果演示：

通过HTML Canvas 在图片上绘制文字

目录前言一、HTML Canvas 简介二、准备工作三、绘制图片四、绘制文字五、完整代码效果演示： 前言 HTML canvas 为我们提供了无限的创意可能性。今天，我们就来探索一下如何通过 HTML canvas 将图片和文字绘制到图片上，创造出独特…...

编程日记 2025/5/16 18:57:33

【C#】ListBox中找到多个image中的其中一个并重置赋值以便清理占用内存

1.ListBox中定义多个image 定义ListBox前台代码及Image控件的赋值 <ListBox Background"{DynamicResource BackgroundBrush}" ItemsSource"{Binding ElementNameDRFinish,PathImages}" Style"{x:Null}" Name"ImageList"ItemConta…...

编程日记 2025/5/16 16:55:25

Apache Commons工具类库使用整理

文章目录 Apache Commons工具类库分类- commons-lang3字符串工具：StringUtils日期工具：DateUtils数值工具：NumberUtils对象工具：ObjectUtils数组工具：ArrayUtils异常工具：ExceptionUtils枚举工具&#xff1…...

编程日记 2025/5/16 16:59:06

npm 设置镜像

要在npm中设置镜像，你可以使用npm config命令。以下是设置npm镜像的步骤： 临时使用淘宝镜像： npm --registry https://registry.npmmirror.com install package-name 永久设置镜像： npm config set registry https://registry…...

编程日记 2025/5/14 21:21:07

数据结构自测5

第6章树和二叉树自测卷解答一、下面是有关二叉树的叙述，请判断正误（每小题1分，共10分） （ √ ）1. 若二叉树用二叉链表作存贮结构，则在n个结点的二叉树链表中只有n—1个非空指针域。 &#xff…...

编程日记 2025/5/6 14:55:23

【后端面试总结】缓存策略选择

一般来说我们常见的缓存策略有三种，他们各自的优劣势和实现逻辑分别如下 Cache Aside（旁路缓存） 特点： 灵活性高：应用程序直接与缓存和数据库交互，具有高度的灵活性，可以根据业务需求自定义缓…...

编程日记 2025/5/12 8:51:57

40分钟学 Go 语言高并发：RPC服务开发实战

RPC服务开发实战一、RPC服务基础概览开发阶段关键点重要程度考虑因素接口设计API定义、协议选择、版本控制⭐⭐⭐⭐⭐可扩展性、兼容性服务实现业务逻辑、并发处理、资源管理⭐⭐⭐⭐⭐性能、可靠性错误处理异常捕获、错误码、故障恢复⭐⭐⭐⭐稳定性、可维护性性能测试负载…...

编程日记 2025/5/14 6:21:52

Linux 无界面模式下使用 selenium

文章目录前言什么是无界面模式？具体步骤安装谷歌浏览器查看安装的谷歌浏览器的版本下载对应版本驱动并安装Python 测试代码总结个人简介前言在 Linux 服务器上运行自动化测试或网页爬虫时，常常需要使用 Selenium 来驱动浏览器进行操作。然而&#x…...

编程日记 2025/5/14 23:57:38

算法第一弹-----双指针

目录 1.移动零 2.复写零 3.快乐数 4.盛水最多的容器 5.有效三角形的个数 6.查找总价值为目标值的两个商品 7.三数之和 8.四数之和双指针通常是指在解决问题时，同时使用两个指针（变量，常用来指向数组、链表等数据结构中的元素位置&am…...

编程日记 2025/5/15 17:28:28

学习如何解决“区间划分”问题（一般方法论+实例应用讲解）

文章目录解决“区间划分”问题的一般方法论方法论：解决区间划分问题的四步法1. 问题分析与建模2. 动态规划状态的定义3. 状态转移方程4. 初始条件与边界方法论应用：最小和最大石子合并得分问题描述步骤 1：问题分析与建模步骤 2：…...

编程日记 2025/5/13 17:14:00

消息中间件-Kafka2-3.9.0源码构建 1、软件环境 JDK Version 1.8Scala Version 2.12.0Kafka-3.9.0 源码包下载地址：https://downloads.apache.org/kafka/3.9.0/kafka-3.9.0-src.tgzGradle Version > 8.8Apache Zookeeper 3.7.0 2、源码编译打开源码根目录修改…...

编程日记 2025/5/9 9:55:40

达梦归档文件名与实例对应关系

默认的，达梦归档文件名比较难以看懂，且多实例下不好区分靠它就行 select upper(to_char((select DB_MAGIC), xxxxxxxxxx)) mag_id; 这样就对上号了。...

编程日记 2025/5/13 15:35:35

STL算法之sort

STL所提供的各式各样算法中，sort()是最复杂最庞大的一个。这个算法接受两个RandomAccessIterators(随机存取迭代器)，然后将区间内的所有元素以渐增方式由小到大重新排列。还有一个版本则是允许用户指定一个仿函数代替operator<作为排序标准。STL的所有…...

编程日记 2025/5/13 16:38:03

elementui table滚动分页加载

文章目录概要简化的实现示例： 小结概要在使用 Element UI 的 Table 组件时，如果需要实现滚动分页加载的功能，可以通过监听 Table 的滚动事件来动态加载更多数据。简化的实现示例： <template><el-table ref"…...

编程日记 2025/5/16 17:06:25

【MySQL 进阶之路】索引的使用

5.索引的使用规则在数据库管理系统（DBMS）中，索引是提高查询效率的关键机制之一。MySQL索引优化是指通过设计、调整和选择合适的索引策略，以提高数据库的查询性能和降低资源消耗。以下是一些关键的索引使用规则： 1. …...

编程日记 2025/5/9 14:22:32

FPGA中所有tile介绍

FPGA中包含的tile类型，以xinlinx 7k为例，可以通过f4pga项目中的原语文件夹查看，主要包含以下这些： 以下是您提到的 Xilinx 7 系列 FPGA 中各种模块的含义及用途： 1. BRAM (Block RAM) BRAM 是 FPGA 中的块存储资源&…...

编程日记 2025/5/12 3:49:07

理解 Python PIL库中的 convert(‘RGB‘) 方法：为何及如何将图像转换为RGB模式

理解 Python PIL库中的 convert(RGB) 方法：为何及如何将图像转换为RGB模式在图像处理中，保持图像数据的一致性和可操作性是至关重要的。Python的Pillow库（继承自PIL, Python Imaging Library）提供了强大的工具和方法来处理图像&…...

编程日记 2025/5/14 23:59:58

LVS默认的工作模式支持哪些负载均衡算法?

LVS默认的工作模式支持哪些负载均衡算法? LVS（Linux Virtual Server）默认支持多种负载均衡算法，这些算法在不同的场景下具有各自的优势。以下是 LVS 默认支持的负载均衡算法及其特点： 1. 轮询调度（Round Robin Sched…...

编程日记 2025/5/15 17:21:42

C/C++中的调用约定

在C/C编程中，调用约定(calling conventions)是一组指定如何调用函数的规则。主要在你调用代码之外的函数(例如OS API，操作系统应用程序接口)或OS调用你(如WinMain的情况)时起作用。如果编译器不知道正确的调用约定，那么你很可能会遇到非常奇怪…...

编程日记 2025/5/9 14:04:30

RAG评估指南：从检索到生成，全面解析LLM性能评估方法

前言这一节我们将从时间线出发对RAG的评估方式进行对比，这些评估方式不仅限于RAG流程之中，其中基于LLM的评估方式更加适用于各行各业。 RAG常用评估方式上一节我们讲了如何用ROUGE 这个方法评估摘要的相似度，由于篇幅限制，没…...

编程日记 2025/5/9 15:08:43

极兔速递开放平台快递物流查询API对接流程

目录极兔速递开放平台快递物流查询API对接流程API简介物流查询API 对接流程1. 注册用户2. 申请成为开发者3. 企业认证4. 联调测试5. 发布上线签名机制详解1. 提交方式2. 签名规则3. 字段类型与解析约定物流轨迹服务极兔快递单号查询的其他方案总结极兔速递开放平台快递物流…...

编程日记 2025/5/10 22:04:51

FFmpeg：强大的音视频处理工具指南

FFmpeg：强大的音视频处理工具指南 1. FFmpeg简介2. 核心特性2.1 基础功能2.2 支持的格式和编解码器 3. 主要组件3.1 命令行工具3.2 开发库 4. 最新发展5. 安装指南5.1 Windows系统安装5.1.1 直接下载可执行文件5.1.2 使用包管理器安装 5.2 Linux系统安装5.2.1 Ubunt…...

编程日记 2025/5/15 4:41:17

项目集成篇：springboot集成redistemple实现自定义缓存，并且可以设置过期时间

在Spring Boot中集成Redis并使用RedisTemplate实现自定义缓存功能，同时能够设置缓存项的过期时间，可以通过以下步骤来完成。我们将创建一个服务层方法，该方法将使用RedisTemplate直接与Redis交互，并为每个缓存项设置特定的过期时间…...

编程日记 2025/5/14 8:15:24

ClickHouse守护进程

背景描述维护CK过程中，有时候会有CK OOM，并且CK自己没有自动拉起的情况出现；那么这个时候就需要守护进程，最初我不说了Supervisor来做守护进程，但是当我手动kill的时候发现并没有自动拉起。解决方案于是乎自己写…...

编程日记 2025/5/14 11:46:38

【Vivado】xdc约束文件编写

随手记录一下项目中学到的约束文件编写技巧。时序约束创建生成时钟参考链接： Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟（MMCM或…...

编程日记 2025/5/15 12:01:12

Nginx静态资源配置

基本配置原则明确资源目录：为不同类型的静态资源指定不同的路径，这样可以避免路径冲突，并且便于管理。正确设置文件权限：确保 Nginx 具有读取静态资源的权限。缓存优化：为静态资源设置缓存头（如 expires&…...

编程日记 2025/5/16 5:26:14

365天深度学习训练营-第P7周：马铃薯病害识别（VGG-16复现）

文为「365天深度学习训练营」内部文章参考本文所写记录性文章，请在文章开头带上「👉声明」 🍺 要求： 自己搭建VGG-16网络框架【达成√】调用官方的VGG-16网络框架【达成√】如何查看模型的参数量以及相关指标【达成√】 &#…...

编程日记 2025/5/16 9:51:02

docker学习笔记（三）--容器数据卷

文章目录一、数据卷的介绍二、简单用法--直接指定挂载路径三、具名挂载与匿名挂载具名挂载匿名挂载一、数据卷的介绍 docker将应用和环境打包成一个镜像，形成一个容器运行。那么容器产生的数据，如果不通过docker commit命令提交生成新的镜像&#xff…...

编程日记 2025/5/11 22:21:47

联通光猫DT741-csf 完全po解改桥接

1.管理员密码破解，把光猫的loid pppoe用户名密码，各个连接vlan id记下来打开链接 http://192.168.1.1/hidden_version_switch.html version选择Default Version，点击submit，光猫默认重启。重启后ip地址变为192.168.1.1 并且dhcp…...

编程日记 2025/5/11 11:14:47

Java Web 2 JS Vue快速入门

一 JS快速入门 1.什么是JavaScript？ 页面交互： 页面交互是指用户与网页之间的互动过程。例如，当用户点击一个按钮，网页会做出相应的反应，如弹出一个对话框、加载新的内容或者改变页面的样式等；当用户在表…...

编程日记 2025/5/15 1:45:45

【数据结构】动态规划-基础篇

针对动态规划问题，我总结了以下5步： 确定dp数组以及下标的含义； 递推公式； dp数组如何初始化； 遍历顺序； 打印dp数组（用来debug）； 以上5步适用于任何动态规划问题&#x…...

编程日记 2025/5/13 22:33:11

从watch、watchEffect、useEffect原理到vue、react响应原理

正文 1.核心原理 Vue中的watch、watchEffect是基于Vue的响应式系统（Proxy），依赖于ref或reactive数据的变化。React中的useEffect基于状态驱动的重新渲染机制，通过依赖数组 [dependency]，手动声明需要追踪的状态或属性…...

编程日记 2025/5/16 5:29:39

Cursor+Devbox AI开发快速入门

1. 前言今天无意间了解到 Cursor 和 Devbox 两大开发神器,初步尝试以后发现确实能够大幅度提升开发效率,特此想要整理成博客以供大家快速入门. 简单理解 Cursor 就是一款结合AI大模型的代码编辑器,你可以将自己的思路告诉AI,剩下的目录结构的搭建以及项目代码的实现均由AI帮…...

编程日记 2025/5/8 20:32:52

SpringBoot+MyBatis整合ClickHouse实践

整合Spring Boot、MyBatis和ClickHouse可以让你使用Java开发的应用程序高效地与ClickHouse数据库进行交互。以下是一个基本的步骤指南，帮助你完成这个整合过程： 1. 添加依赖首先，在你的pom.xml文件中添加必要的Maven依赖。你需要引入Sprin…...

编程日记 2025/5/11 22:50:23

在数据库设计中同步冗余字段的思考与实践

目录前言1. 冗余字段设计的背景与场景1.1 场景描述1.2 冗余字段的必要性 2. 冗余字段设计的优点2.1 提高查询效率2.2 简化应用逻辑 3. 冗余字段设计的缺点与挑战3.1 数据不一致问题3.2 更新开销增加3.3 数据冗余占用存储空间 4. 如何同步更新冗余字段4.1 手动更新方式4.2 使用…...

编程日记 2025/5/9 13:38:59

MacOS安装sshfs挂载远程电脑硬盘到本地

文章目录 sshfs简介sshfs安装下载安装macFUSE安装sshfs sshfs使用注意事项 sshfs简介 SSHFS（SSH Filesystem）是一种基于FUSE（用户空间文件系统）的文件系统，它允许你通过SSH协议挂载远程文件系统。使用SSHFS&#xff0…...

编程日记 2025/5/15 14:24:39

6.824/6.5840(2024)环境配置wsl2+vscode

本文是经过笔者实践得出的最速の环境配置首先，安装wsl2和vscode 具体步骤参见Mit6.s081环境配置踩坑之旅WSL2VScode_mit6s081-CSDN博客接下来开始为Ubuntu(笔者使用的版本依然是20.04)配置go的相关环境 1、更新Ubuntu的软件包 sudo apt-get install build-es…...

编程日记 2025/5/15 11:30:15

查询产品所涉及的表有（product、product_admin_mapping）

文章目录 1、ProductController2、AdminCommonService3、ProductApiService4、ProductCommonService5、ProductSqlService1. 完整SQL分析可选部分（条件筛选）： 2. 涉及的表3. 总结4. 功能概述查询指定管理员下所有产品所涉及的表？…...

编程日记 2025/5/12 8:51:48

C# 冒泡的算法

C# 冒泡的算法 public void BubbleSort(int[] arr) {int temp;for (int j 0; j < arr.Length - 2; j){for (int i 0; i < arr.Length - 2; i){if (arr[i] > arr[i 1]){temp arr[i 1];arr[i 1] arr[i];arr[i] temp;}}} }使用方法 int[] array new int[] { 5,…...

编程日记 2025/5/14 17:11:51

前端上传后端接收参数为null

记录一下工作中的问题前端明明把文件传到后台了，但是后台接收参数为null 原因： 前端上传文件的name和后端接收参数名称不匹配前端后端把前端上传的name由upfile改为file即可本来是很基本的小问题，但因为自己钻了牛角尖一直没搞定&…...

编程日记 2025/5/13 14:08:26

思考：如何把知识更轻松的传递给别人

为什么我会来思考这个问题呢，我想要把我学到的东西传递给其他人，也就是能够成为一个老师，我曾多次尝试解决问题，但是事情总是不如我所愿。现在我进行一定的总结，来复盘一下我的教授过程。在学生面对新鲜事物的同时&am…...

编程日记 2025/5/16 15:14:51

BERT的中文问答系统50

我们将对BERT的中文问答系统48-1代码进行以下改进： 1.增加时间日期和日历功能：在GUI中增加显示当前时间和日期的功能，并提供一个日历组件。 2.增加更多模型类型：增加娱乐、电脑、军事、汽车、植物、科技、历史（朝代、皇帝）、名人、生活（出行、菜品、菜谱、居家），法律、…...

编程日记 2025/5/16 12:41:04

node.js实现分页，jwt鉴权机制，token，cookie和session的区别

文章目录 1. 分⻚功能2. jwt鉴权机制1.jwt是什么2.jwt的应用3.优缺点 3. cookie，token，session的对比 1. 分⻚功能为什么要分页如果数据量很⼤，⽐如⼏万条数据，放在⼀个⻚⾯显⽰的话显然不友好，这时候就需要采⽤分⻚…...

编程日记 2025/5/13 3:02:56

OpenHarmony-4.GPIO驱动

GPIO 1.功能简介 GPIO（General-purpose input/output）即通用型输入输出。GPIO又俗称为I/O口，I指的是输入(in），O指的是输出（out）。可以通过软件来控制其输入和输出，即I/O控制。通常&…...

编程日记 2025/5/9 14:51:38

static关键字在嵌入式C编程中的应用

目录一、控制变量的存储周期和可见性 1.1. 局部静态变量 1.2. 全局静态变量二、控制函数的可见性 2.1. 静态函数 2.2. 代码示例（假设有两个文件：file1.c和file2.c） 三、应用场景 3.1. 存储常用数据 3.2. 实现内部辅助函数四、注…...

编程日记 2025/5/12 15:42:51

图形开发基础之在WinForms中使用OpenTK.GLControl进行图形绘制

前言 GLControl 是 OpenTK 库中一个重要的控件，专门用于在 Windows Forms 应用程序中集成 OpenGL 图形渲染。通过 GLControl，可以轻松地将 OpenGL 的高性能图形绘制功能嵌入到传统的桌面应用程序中。 1. GLControl 的核心功能 OpenGL 渲染上下文&…...

编程日记 2025/5/14 13:52:19