通过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>

效果演示:

相关推荐
一城烟雨_1 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想2 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师3 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧3 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信3 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子4 小时前
CSS单位完全指南
前端·css
SunTecTec4 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪5 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程6 小时前
ES练习册
java·前端·elasticsearch
Asthenia04126 小时前
Netty编解码器详解与实战
前端