目录
前言
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>
效果演示：
