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

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

news 2025/9/21 3:56:53

目录

前言

一、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 简介 二、准备工作 三、绘制图片 四、绘制文字 五、完整代码 效果演示&#xff1a; 前言 HTML canvas 为我们提供了无限的创意可能性。今天&#xff0c;我们就来探索一下如何通过 HTML canvas 将图片和文字绘制到图片上&#xff0c;创造出独特…...

编程日记 2024/12/5 11:17:33

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,…...

编程日记 2024/12/5 11:16:32

大数据项目-Django基于聚类算法实现的房屋售房数据分析及可视化系统

《[含文档PPT源码等]精品Django基于聚类算法实现的房屋售房数据分析及可视化系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程课程答疑等&#xff01; 数据库管理工具&#xff1a;phpstudy/Navicat或者phpstudy/sqlyog 后台管理系统涉及技术&#xff1a; 后台使…...

编程日记 2024/12/5 11:14:30

AWS创建ec2实例并连接成功

aws创建ec2实例并连接 aws创建ec2并连接 1.ec2创建前准备 首先创建一个VPC隔离云资源并且有公有子网 2.创建EC2实例 1.启动新实例或者创建实例 2.创建实例名 3.选择AMI使用linux(HVM) 4.选择实例类型 5.创建密钥对下载到本地并填入密钥对名称 6.选择自己创建的VPC和公有子网…...

编程日记 2024/12/5 11:13:29

TypeScript 开始学习 -接触的新东西

目录 语言类型类型总览JavaScript 中的数据类型TypeScript 中的数据类型 定义类型断言索引签名泛型 语言类型 JS -> 弱类型 TS -> 强类型 TypeScript&#xff08;TS&#xff09;是一种强类型语言。‌这意味着在TypeScript中&#xff0c;变量和函数参数的类型必须在编译时…...

编程日记 2024/12/5 11:12:26

非对称任意进制转换器（安卓）

除了正常进制转换&#xff0c;还可以输入、输出使用不同的数字符号&#xff0c;达成对数值进行加密的效果 点我下载APK安装包 使用unity开发。新建一个c#代码文件&#xff0c;把代码覆盖进去&#xff0c;再把代码文件添加给main camera即可。 using System.Collections; usin…...

编程日记 2024/12/5 11:10:24

【优选算法篇】寻找隐藏的宝藏：用二分查找打开算法世界的大门（上篇）

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…...

编程日记 2024/12/5 11:09:23

基于Vue实现的移动端手机商城项目 电商购物网站 成品源码

&#x1f4c2;文章目录 一、&#x1f4d4;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站演示 &#x1f4f8;部分截图 &#x1f3ac;视频演示 五、⚙️网站代码 &#x1f9f1;项目结构 &#x1f492;vue代码预览 六、&#x1f527;完整…...

编程日记 2024/12/5 11:07:21

C语言：数组

数组 数组的概念 引例 如果我们要在程序中表示一个学生的成绩&#xff0c;我们会使用一个int来表示&#xff0c;如&#xff1a;int score。假如我们要在程序中表示一组成绩&#xff0c;此时我们所学的常规的数据类型就无法再表示&#xff0c;这个时候我们就需要使用一种新的…...

编程日记 2024/12/5 11:04:18

时间序列预测之FiLM

没错&#xff0c;就是看电影 文章目录 前言1. 问题描述2. 创新之处3. 贡献 一、时间序列在legende - fourier域的表示1. 勒让德投影2. 傅里叶变换 二、 模型结构1. LPU: Legendre Projection Unit2. FEL: Frequency Enhanced Layer3. 多尺度专家机制的混合 二、实验结果长时预测…...

编程日记 2024/12/5 11:03:17

【机器学习】窥数据之序，悟算法之道：机器学习的初心与远方

文章目录 机器学习入门&#xff1a;从零开始学习基础与应用前言第一部分&#xff1a;什么是机器学习&#xff1f;1.1 机器学习的定义1.1.1 举个例子&#xff1a;垃圾邮件分类器 1.2 机器学习的核心思想1.2.1 数据驱动的模式提取1.2.2 为什么机器学习比传统方法更灵活&#xff1…...

编程日记 2024/12/5 11:02:16

OpenCL介绍

OpenCL&#xff08;Open Computing Language&#xff09;详解 OpenCL 是一个开源的框架&#xff0c;用于编写在异构平台&#xff08;包括中央处理单元&#xff08;CPU&#xff09;、图形处理单元&#xff08;GPU&#xff09;、数字信号处理器&#xff08;DSP&#xff09;和其他…...

编程日记 2024/12/5 11:00:14

「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用

本篇将带你实现一个数字键盘应用&#xff0c;支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。 关键词 UI互动应用数字键盘按钮组件状态管理用户交互 一、功能说明 数字键盘应用将实现以下功能&…...

编程日记 2024/12/5 10:59:13

【前端知识】npm命令行详细说明

npm命令行详细说明 概述一、定义与功能二、基本命令三、配置文件与注册表四、应用场景五、高级特性 环境设置1. 设置镜像源2. 配置全局依赖存储路径3. 配置缓存路径4. 查看所有配置5. 清除缓存6. 升级npm版本 npm组件打包1. 初始化项目2. 安装依赖3. 构建脚本4. 打包项目5. 发布…...

编程日记 2024/12/5 10:58:12

Python网络爬虫技术详解与实践案例

Python网络爬虫技术详解与实践案例 在大数据和人工智能盛行的今天，数据的获取与分析成为许多项目和业务的关键。网络爬虫作为一种自动化的数据采集工具，广泛应用于数据挖掘、市场分析、情报收集等领域。本文将详细介绍Python网络爬虫的基本概念、工作流程、进阶技巧，并附上…...

编程日记 2024/12/5 10:56:10

【遥感目标检测综述】【GRSS】遥感目标检测与深度学习的相遇：挑战与进展的元综述

Remote Sensing Object Detection Meets Deep Learning&#xff1a; A Meta-review of Challenges and Advances 遥感目标检测与深度学习的相遇&#xff1a;挑战与进展的元综述 论文链接 0.论文摘要和作者信息 摘要 遥感目标检测&#xff08;RSOD&#xff09;是遥感领域最基…...

编程日记 2024/12/5 10:55:09

【大数据技术基础】 课程 第3章 Hadoop的安装和使用 大数据基础编程、实验和案例教程（第2版）

第3章 Hadoop的安装和使用 3.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台&#xff0c;为用户提供了系统底层细节透明的分布式基础架构。Hadoop是基于Java语言开发的&#xff0c;具有很好的跨平台特性&#xff0c;并且可以部署在廉价的计算机集群中。H…...

编程日记 2024/12/5 10:53:06

【机器学习】机器学习的基本分类-监督学习-决策树-C4.5 算法

C4.5 是由 Ross Quinlan 提出的决策树算法&#xff0c;是对 ID3 算法的改进版本。它在 ID3 的基础上&#xff0c;解决了以下问题&#xff1a; 处理连续型数据&#xff1a;支持连续型特征&#xff0c;能够通过划分点将连续特征离散化。处理缺失值&#xff1a;能够在特征值缺失的…...

编程日记 2024/12/5 10:52:05

云计算vsphere 服务器上添加主机配置

这里是esxi 主机 先把主机打开 然后 先开启dns 再开启 vcenter 把每台设备桌面再vmware workstation 上显示 同上也是一样 &#xff0c;因为在esxi 主机的界面可能有些东西不好操作 我们选择主机和集群 左边显示172.16.100.200...

编程日记 2024/12/5 10:51:03

Linux笔记---进程：进程替换

1. 进程替换的概念 进程替换是指在一个正在运行的进程中&#xff0c;用一个新的程序替换当前进程的代码和数据&#xff0c;使得进程开始执行新的程序&#xff0c;而不是原来的程序。 这种技术通常用于在不创建新进程的情况下&#xff0c;改变进程的行为。 我们之前谈到过for…...

编程日记 2024/12/5 10:50:03

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/20 0:09:21

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/9/20 1:42:10

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/8/27 15:36:00

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/9/7 8:51:12

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/9/13 17:38:50

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/9/12 8:21:45