Javascript 如何使用多个文本字段和文本换行在画布上显示用户输入
我正在尝试建立这个网站,用户输入的文本将把文本绘制到正在显示的图像的语音气泡中。我有三个问题: 用户可以向画布输入文本,但当用户删除字符时,画布上绘制的文本不会更新 文本在用户输入时根本不换行,但在我直接插入字符串时会换行。我希望文本与用户输入一起换行 每当用户开始在新的输入框中输入时,画布中的所有文本都会被删除 我已经在网上寻找了教程和答案,但没有一个是我在这里正确工作所需要的确切解决方案。任何其他建议都会有帮助 谢谢Javascript 如何使用多个文本字段和文本换行在画布上显示用户输入,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试建立这个网站,用户输入的文本将把文本绘制到正在显示的图像的语音气泡中。我有三个问题: 用户可以向画布输入文本,但当用户删除字符时,画布上绘制的文本不会更新 文本在用户输入时根本不换行,但在我直接插入字符串时会换行。我希望文本与用户输入一起换行 每当用户开始在新的输入框中输入时,画布中的所有文本都会被删除 我已经在网上寻找了教程和答案,但没有一个是我在这里正确工作所需要的确切解决方案。任何其他建议都会有帮助 谢谢 <html> <input id="input-text
<html>
<input id="input-text" type="text" onkeyup="usertextChange(this.value)"
maxlength="6" />
<input id="input-text2" type="text" onkeyup="usertextChange2(this.value)"
maxlength="5" />
<input id="input-text3" type="text" onkeyup="usertextChange3(this.value)"
maxlength="12" />
<input id="input-text4" type="text" onkeyup="usertextChange4(this.value)"
maxlength="18" />
<div class="art-container">
<canvas id="canvas" width="576" height="576">
Canvas requires a browser that supports HTML5.
</canvas>
<img crossOrigin="Anonymous" id="no-crying"
src="https://cdn.glitch.com/4ed5f9d8-97ad-4c53-b855-3e8d508ba2f3%2FDVSN-
FUTURE-NO-CRYIN-FINAL-NoText.jpg?v=1572122142300"/>
</div>
</html>
<style>
#input-text, #input-text2, #input-text3, #input-text4 {
width: 90%;
font-size: 18px;
height: 24px;
text-transform: uppercase;
padding: 0 8px;
background-color: transparent;
color: red;
border: 2px solid black;
outline: none;
border-radius: 4px;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
font-weight: 500;
font-family: bubblegum;
}
#no-crying {
display: none;
}
</style>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var maxWidth = 90;
var lineHeight = 45;
var x = 35;
var y = 315;
var text = document.getElementById('input-text1').value;
var text2 = document.getElementById('input-text2').value;
var text3 = document.getElementById('input-text3').value;
var text4 = document.getElementById('input-text4').value;
function drawImage(text) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var img = document.getElementById('no-crying');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
window.onload = function() {
drawImage();
}
// USER IMPUT FUNCTIONS
window.usertextChange = function(val){
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
drawImage();
context.font = '26px Bubblegum';
context.fillStyle = "#000000";
context.fillText(val, 39, 315);
context.save();
wrapText(context, text, x, y, maxWidth, lineHeight);
}
window.usertextChange2 = function(val){
context.restore();
context.font = '22px Bubblegum';
context.fillStyle = "#000000";
context.fillText(val, 45, 370);
context.save();
wrapText(context, text, x, y, maxWidth, lineHeight);
}
window.usertextChange3 = function(val){
context.restore();
context.font = '26px Bubblegum';
context.fillStyle = "#000000";
context.fillText(val, 25, 420);
context.save();
wrapText(context, text, x, y, maxWidth, lineHeight);
}
window.usertextChange4 = function(val){
context.restore();
context.font = '24px Bubblegum';
context.fillStyle = "#000000";
context.fillText(val, 48, 360);
wrapText(context, text, x, y, maxWidth, lineHeight);
}
</script>
几点意见:
使用var text=document.getElementById'input-text1'。值;id为input-text1,而在HTML中,id是输入文本
使用从未使用过的文本参数定义函数drawImagetext。在此函数中,再次创建画布和上下文变量
在DOM中插入一个隐藏的图像,以便稍后在画布上绘制。我认为创建一个新的图像对象更容易
函数wrapText有点模棱两可。它会格式化文本吗?它有什么显示吗?您可以将其重命名为displayWrapText或getWrappedText
然后,关于你的问题:
当用户删除字符时,文本不会更新,因为除了输入1之外,当用户键入时,它不会清除气泡,并且会在上一个气泡上绘制新文本,因为气泡变暗了。这就是为什么你看不出有什么不同。删除对第一次输入有效,因为您清除了冒泡并再次绘制全文
Tbh,我尝试时忘记了这个问题,现在它运行良好。。。在任何情况下,为wrapText函数提供适当的maxWidth:有大小气泡。但是,如果字符串不包含任何空格,则不会换行
当用户输入第一个输入时,它会清除画布,但只在第一个气泡内再次显示文本,因此其他气泡显示为空。您需要清除画布并重新绘制所有相应气泡中的文本
我所做的是应用我之前告诉过你的,并改进事件处理,因为每个输入的代码几乎相同。为了能够在每次更新后重新绘制所有气泡,我会在每次更新时存储它们的值
const canvas=document.getElementById'canvas';
const context=canvas.getContext'2d';
常数线宽=30;
让我们了解一下背景;
让文本1;
让文本2;
让文本3;
让文本4;
初始化;
函数初始化{
text1=;
text2=;
text3=;
text4=;
背景img=新图像;
背景img.src=https://cdn.glitch.com/4ed5f9d8-97ad-4c53-b855-3e8d508ba2f3%2FDVSN-未来无需修改最终注释xt.jpg?v=1572122142300';
context.drawImagebackgroundImg,0,0,canvas.width,canvas.height;
document.querySelector'input-container'。addEventListener'keyup',function e{
const num=parseInte.target.getAttribute'data-bubble',10;
常量文本=e.target.value;
saveTextnum,text;
画布、背景、背景;
},假;
}
函数drawcanvas、上下文、背景IMG{
context.clearRect0,0,canvas.width,canvas.height;
context.drawImagebackgroundImg,0,0,canvas.width,canvas.height;
drawBubblecanvas,context,getTextFrom1,39315,'26px Bubblegum','000000',110,lineHeight;//bubble 1
drawBubblecanvas,context,getTextFrom2,45370,'22px Bubblegum','000000',70,lineHeight;//bubble 2
drawBubblecanvas,context,getTextFrom3,20425,'26px Bubblegum','000000',120,lineHeight;//bubble 3
drawBubblecanvas,context,getTextFrom4,20515,'24px Bubblegum','000000',120,lineHeight;//bubble 4
}
函数getTextFromnum{
开关数{
案例1:返回文本1;
案例2:返回文本2;
案例3:返回文本3;
案例4:返回文本4;
违约:;
}
}
函数saveTextnum,text{
开关数{
案例1:text1=text;break;
案例2:text2=文本;中断;
案例3:text3=文本;中断;
案例4:text4=文本;中断;
}
}
函数显示WrappedTextContext、文本、x、y、maxWidth、lineHeight{
var words=text.split“”;
var行=;
对于变量n=0;n你可以创建另一个图像:将整个画布保存为一个图像,包含图像和文本:查找已接受的答案对不起,我正在查看你发送的链接,但我仍然不是最好的。js你能帮助我们如何使用我们一直使用的代码进行此操作吗?他实现了一个dlCanvas函数。我现在不能测试,所以试着用提供的下载按钮使用它,我得到了那个部分,但问题是它一直在下载画布的版本,而没有键入文本。如何始终下载画布的当前状态?令人惊讶的是,在他的示例中,他下载当前画布时没有问题。为了能够在没有空格的情况下进行换行,需要手动创建一个线阵列,手动将其显示在彼此下方/上方。
function init() {
text1 = '';
text2 = '';
text3 = '';
text4 = '';
backgroundImg = new Image();
backgroundImg.src = 'https://cdn.glitch.com/4ed5f9d8-97ad-4c53-b855-
3e8d508ba2f3%2FDVSN-FUTURE-NO-CRYIN-FINAL-NoText.jpg?v=1572122142300';
backgroundImg.setAttribute('crossOrigin', 'anonymous');
function addLink() {
var link = document.createElement('a');
link.innerHTML = 'Download!';
link.addEventListener('click', function(e) {
link.href = canvas.toDataURL();
link.download = "salt-bae.png";
}, false);
link.className = "instruction";
document.getElementById('input-container').appendChild(link);
}
window.onload = function() {
drawImage();
addLink();
}