foreword
In the past two days, I have been writing a drawing board tool, which is a drawing board realized by pure html+js. It has a text input function. Instead of holding down the mouse to draw text on the drawing board, click the drawing board, and then the clicked position will appear An input box (no border and background, just a blinking cursor), and then press the keyboard to enter text. After the input is completed, the input box is out of focus, and the text is set to the canvas.
Effect
Let's look directly at the renderings
accomplish
In fact, this is an input input box (if you want to enter a new line, you can replace the input with a textarea), but the border and background are all removed, and then the width and height are adaptive.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>canvas</title>
<style>
body {
background-color: #68768A;
}
.content {
margin: 20px;
}
#canvas {
background-color: transparent;
-webkit-box-shadow: 0px 0px 10px 5px #3b8cf8, 0 0 1px #3b8cf8, 0 0 1px #3b8cf8, 0 0 1px #3b8cf8, 0 0 1px #3b8cf8, 0 0 1px #3b8cf8, 0 0 1px #3b8cf8;
}
</style>
</head>
<body>
<div style="margin: 30px auto;width: 1500px;">
<canvas id="canvas" width="1500" height="800"></canvas>
</div>
<script>
// 获取画布和绘画工具
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 跟踪绘画状态
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
let points = []; //存储坐标点
// 鼠标单击
canvas.onclick = function (e) {
points = [];
draw(e.offsetX,e.offsetY);
};
// 绘制
function draw(mousex, mousey) {
points.push({
x: mousex, y: mousey });
draw文字();
ctx.stroke();
points.slice(0, 1);
}
// 输入文字
function draw文字(){
const startX = points[0].x;
const startY = points[0].y;
const textarea = document.createElement('textarea'); // 创建一个多行输入框元素
const canvasRect = canvas.getBoundingClientRect(); // 获取画布的位置信息
const fontSize = 30;
textarea.rows = 10;
textarea.style.position = 'absolute';
textarea.style.left = (canvasRect.left + startX) - 10 + 'px'; // 计算输入框的左边距（最后-10是为了让光标能显示在鼠标前面一点点）
textarea.style.top = (canvasRect.top + startY) + 'px'; // 计算输入框的上边距
textarea.style.border = 'none';
textarea.style.background = 'transparent';
textarea.style.font = fontSize+'px 微软雅黑';
textarea.style.color = '#fff';
textarea.style.outline = 'none';
textarea.style.padding = '0';
textarea.style.margin = '0';
textarea.style.width = 'auto';
textarea.style.height = 'auto';
textarea.style.resize = 'none';
textarea.style.overflow = 'hidden';
textarea.style.zIndex = '100';
// 监听失去焦点事件
textarea.addEventListener('blur', function() {
const text = textarea.value;
if(text.length > 0){
ctx.font = fontSize+'px 微软雅黑';
ctx.fillStyle = '#fff';
const lines = text.split('\n'); // 将输入的文本按换行符分割成多行
let y = startY;
lines.forEach(function(line) {
ctx.fillText(line, startX, y); // 在画布上绘制每一行文字
y += (fontSize+5); // 每行文字的垂直间距为35像素（这个一般要根据字体大小进行设置，我设置的是字体大小+5比较合适）
});
}
document.body.removeChild(textarea); // 移除输入框元素
});
document.body.appendChild(textarea); // 将输入框元素添加到页面中
textarea.focus(); // 让输入框获得焦点
}
</script>
</body>
</html>
