最近使用canvas的时候遇到一个问题，需要在canvas画布的上面增加文本输入框用于文本的输入并在完成后保存
找了很多资料，没有找到解决方案，求出手
你可以使用HTML的“
”标签。以下是一个简单的例子：
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<input type="text" id="myTextInput" />
</body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 设置文本框位置
var textBoxPosition = canvas.getBoundingClientRect();
var textBox = document.getElementById("myTextInput");
textBox.style.position = "absolute";
textBox.style.top = textBoxPosition.top + "px";
textBox.style.left = textBoxPosition.left + "px";
// 添加事件监听器，以便在用户输入时重绘画布
textBox.addEventListener("input", function () {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText(textBox.value, 10, 50);
});
// 初始化画布
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText("Canvas", 10, 30);
</script>
</html>
在上面的代码中，我们首先定义了一个Canvas和一个文本框，然后使用JavaScript将文本框的位置设置为Canvas的下方。在文本框中输入时，我们使用“input”事件监听器来重新绘制Canvas并显示输入的文本。
需要注意的是，在绘制文本之前，我们需要设置字体，字体大小和颜色等属性。在此示例中，我们使用了20像素的Arial字体，并将文本颜色设置为黑色。
不知道你这个问题是否已经解决, 如果还没有解决的话:let this.data.hasDenyWritePhotosAlbum = false,//拒绝授权
save() {
var _this = this;
//保存图片到系统相册 底部自动弹出授权选项
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,//wx.canvasToTempFilePath 的 res.tempFilePath，图片临时路径
success(res) {
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
fail(res) {
//用户拒绝相册授权
if ((res.errMsg).indexOf('saveImageToPhotosAlbum') != -1) {
_this.data.hasDenyWritePhotosAlbum = true;
}
}
})
//第一次拒绝授权相册 第二次需要主动调用授权
if (this.data.hasDenyWritePhotosAlbum){
//只能是用户手动触发
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]){
_this.data.hasDenyWritePhotosAlbum = false;
}
}
})
}
}
我可以给出可能的解决方案：在canvas画布上增加文本输入框并保存输入的文本可以通过以下步骤来实现：
const input = document.createElement('input');
input.type = 'text';
input.style.position = 'absolute';
input.style.left = 100 + 'px'; // 设置输入框在画布上的位置
input.style.top = 100 + 'px';
canvas.parentElement.appendChild(input); // 将输入框添加到画布的父级元素中
let text = '';
input.addEventListener('input', e => {
text = e.target.value;
});
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.fillText(text, x, y); // 绘制输入的文本，x和y是文本的坐标
canvas.addEventListener('click', () => {
input.style.display = 'block'; // 显示输入框
input.focus(); // 让输入框获取焦点
});
input.addEventListener('blur', () => {
input.style.display = 'none'; // 隐藏输入框
ctx.fillText(text, x, y); // 绘制文本
});
以上是一个简单的实现文本输入框并保存输入的文本的方案，可以根据具体需求和场景进行扩展和优化。