我正在尝试建立一个站点，用户输入文本的位置会将文本吸引到所显示图像的气泡中。我有三个问题：
用户可以在画布上输入文本，但是当用户删除字符时，画布上绘制的文本不会更新
文本完全不包含用户输入的内容，但是当我直接插入字符串时会包含内容。我想用用户输入的文字换行]]
每当用户开始在新的输入框中键入内容时，画布中的所有文本都会被删除。
我一直在网上寻找教程并在此处找到答案，但是它们都不是我要使其在此处正常运行所需要的确切解决方案。任何其他建议都会有所帮助。
谢谢！
<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>
我正在尝试建立一个站点，用户输入文本的位置会将文本吸引到所显示图像的气泡中。我有三个问题：用户可以在画布上输入文本，但是在...
很少评论：