在HTML5中，我们可以使用<canvas>元素和JavaScript来在图片上添加文字，以下是详细的技术教学：
（图片来源网络，侵删）
1、我们需要在HTML文件中创建一个<canvas>元素，并为其设置一个ID，以便在JavaScript中引用它，我们还需要引入一张图片和一个用于显示文字的<div>元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>在图片上加文字</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
<img src="yourimagesource.jpg" id="myImage" alt="示例图片" style="display:none;">
<div id="textContainer" style="position:absolute; top:50%; left:50%; transform:translate(50%, 50%);">
<p id="text">这是一段示例文字</p>
</div>
<script src="script.js"></script>
</body>
</html>
2、接下来，我们需要编写JavaScript代码来处理图片和文字，我们需要获取<canvas>、<img>和<div>元素的引用，我们将图片绘制到<canvas>上，并在图片上添加文字，我们将<canvas>的内容设置为图片的源。
// script.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('myImage');
const textContainer = document.getElementById('textContainer');
const text = document.getElementById('text');
// 将图片绘制到canvas上
function drawImage() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}
// 在图片上添加文字
function addText() {
ctx.font = '24px Arial'; // 设置字体大小和样式
ctx.fillStyle = '#000'; // 设置字体颜色
ctx.textAlign = 'center'; // 设置文本对齐方式
ctx.textBaseline = 'middle'; // 设置文本基线位置
ctx.fillText(text.innerText, canvas.width / 2, canvas.height / 2); // 在图片中心添加文字
}
// 将canvas的内容设置为图片的源
function updateImage() {
image.src = canvas.toDataURL();
}
// 监听窗口大小变化，调整canvas的大小和位置
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
3、我们需要在页面加载完成后执行上述函数，我们可以使用window.onload事件来实现这一点，我们还需要确保在调整窗口大小时更新canvas的大小和位置。
window.onload = () => {
drawImage();
addText();
updateImage();
};
现在，当你打开HTML文件时，你应该能看到一张带有文字的图片，你可以根据需要修改字体、颜色、大小等样式，你还可以通过修改textContainer元素的CSS样式来调整文字的位置和样式。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/372919.html
微信扫一扫