canvas文本输入框，仿ps文字工具，模拟输入框输入文本

小鱼儿 2024-03-17 23:29 130阅读 0赞

## 前言 ##

这两天在写一个绘画板工具，就纯html+js实现的绘画板，其中有一个文本输入功能，这个不是在画板上按住鼠标绘制文字，而是单击画板，然后单击的位置出现一个输入框（没有边框和背景，只有一个闪烁的光标），然后按键盘可以输入文字。输入完成后输入框失焦，则把文字设置到canvas中。

## 效果 ##

我们直接先来看效果图

![在这里插入图片描述][afcb0a1267aa438380a825d5bcf9d06a.gif]

![在这里插入图片描述][3277f405b46049fdab49ec82156ab5c0.gif]

## 实现 ##

其实这个就是一个input输入框（如果想要换行输入，可以把input换成textarea），只不过把边框、背景这些全部给去掉了，然后宽高自适应等。

<!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>

![在这里插入图片描述][91a78e9bf41f4d4fbb29d13533b95668.png]

[afcb0a1267aa438380a825d5bcf9d06a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a5fd829eea43446b83afe7e0f3017728.png
[3277f405b46049fdab49ec82156ab5c0.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3f987efdb94a4d77bd9712516d54034e.png
[91a78e9bf41f4d4fbb29d13533b95668.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b05b7c1ba3914380b5abecc1804c0a85.png