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

目录

前言

[一、HTML Canvas 简介](#一、HTML Canvas 简介)

二、准备工作

三、绘制图片

四、绘制文字

五、完整代码

效果演示:


前言

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

一、HTML Canvas 简介

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

二、准备工作

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

html 复制代码
var canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;

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

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

三、绘制图片

1.加载图片

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

html 复制代码
<img id="resultImage" src="12images/wz.png" alt="结果图片" title="123">

image.onload = function() {

}

2.绘制图片到 canvas

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

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

四、绘制文字

1.设置文字样式

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

html 复制代码
// 设置文本样式
					ctx.font = "24px Arial";
					ctx.fillStyle = "black";

2.绘制文字到 canvas

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

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

五、完整代码

html 复制代码
<!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>

效果演示:

相关推荐
__不想说话__11 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
番茄比较犟15 分钟前
Combine知识点switchToLatest
前端
北京_宏哥16 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process19 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君20 分钟前
轿车3D展示
前端·webgl·three.js
却尘20 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了22 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷23 分钟前
AntV X6 常用方法
前端
LucianaiB32 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502838 分钟前
D3.js - 基本用法
前端·d3.js