如何使用两个画布包含两个输入文本

Question

在我的代码中，我有两个画布可以在其中输入文本。 当我写文本时，它适合画布（字体大小正在减小），并且我可以更改颜色和字体系列。

因此，当我写入第一个输入文本时，它会出现在第一个画布上。 但是，当我尝试在第二个输入文本上书写时，它不会显示在第二个画布上（如果我按蓝色按钮更改颜色，则只会显示出来）。 这是JSFiddle代码： https ://jsfiddle.net/noytmwu7/24/。非常感谢您的帮助！

 var canvas4 = document.getElementById("canvas4"); var ctx4 = canvas4.getContext("2d"); var clubNameFontFamily = "Arial Black"; var clubNameFontSize = "20px"; var clubNameFontStyle = "bold"; var clubNameFontColor = "#000000"; $('#clubNameTag').bind('change keyup input', redrawTextsCan4); $('#clubNameLine1').bind('click', redrawTextsCan4); function redrawTextsCan4() { ctx4.clearRect(0, 0, canvas4.width, canvas4.height); ctx4.textAlign = "center"; ctx4.fillStyle = clubNameFontColor; clubNameFontSize = fitClubNameOnCanvas(ctx4, $('#clubNameLine1').val().toUpperCase(), clubNameFontFamily); ctx4.font = clubNameFontStyle + " " + clubNameFontSize + "px " + clubNameFontFamily; ctx4.fillText($('#clubNameLine1').val().toUpperCase(), canvas4.width * 0.5, 30); } function fitClubNameOnCanvas(ctx, text, fontface) { var size = clubNameMeasureTextBinMethod(ctx, text, fontface, 0, 80, canvas4.width); if (size > 18) return 18; return size; } function clubNameMeasureTextBinMethod(ctx, text, fontface, min, max, desiredWidth) { if (max - min < 1) { return min; } var test = min + ((max - min) / 2); //Find half interval ctx.font = test + "px " + fontface; measureTest = ctx.measureText(text).width; if (measureTest > desiredWidth) { var found = clubNameMeasureTextBinMethod(ctx, text, fontface, min, test, desiredWidth) } else { var found = clubNameMeasureTextBinMethod(ctx, text, fontface, test, max, desiredWidth) } return found; } function clubNameColor(v4) { v4 = v4.dataset.id; switch (v4) { case "littleblue": clubNameFontColor = "#33ccff"; break; case "orange": clubNameFontColor = "#ff9900"; break; } redrawTextsCan4(); } function changeClubNameFontFamily(v5) { switch (v5) { case "franklin": clubNameFontFamily = "Franklin Gothic"; break; case "impact": clubNameFontFamily = "Impact"; break; } redrawTextsCan4(); } //the second one var canvas11 = document.getElementById("canvas11"); var ctx11 = canvas11.getContext("2d"); var selectedTextFont = "Arial Black"; var selectedFontSize1 = "20px"; var selectedFontStyle = "bold"; var selectedFontColor = "#000000"; var selectedFontSize2 = "20px"; $('#nametag2').bind('change keyup input', redrawTextsCan11); $('#line4').bind('click', redrawTextsCan11); function redrawTextsCan11() { ctx11.clearRect(0, 0, canvas11.width, canvas11.height); ctx11.textAlign = "center"; ctx11.fillStyle = selectedFontColor; selectedFontSize1 = fitTextOnCanvas(ctx11, $('#line4').val().toUpperCase(), selectedTextFont); ctx11.font = selectedFontStyle + " " + selectedFontSize1 + "px " + selectedTextFont; ctx11.fillText($('#line4').val().toUpperCase(), canvas11.width * 0.5, 30); } function fitTextOnCanvas(ctx, text, fontface) { var size = measureTextBinaryMethod(ctx, text, fontface, 0, 80, canvas11.width); if (size > 18) return 18; return size; } function measureTextBinaryMethod(ctx, text, fontface, min, max, desiredWidth) { if (max - min < 1) { return min; } var test = min + ((max - min) / 2); //Find half interval ctx.font = test + "px " + fontface; measureTest = ctx.measureText(text).width; if (measureTest > desiredWidth) { var found = measureTextBinaryMethod(ctx, text, fontface, min, test, desiredWidth) } else { var found = measureTextBinaryMethod(ctx, text, fontface, test, max, desiredWidth) } return found; } function color11(v11) { v11 = v11.dataset.id; switch (v11) { case "littleblue": selectedFontColor = "#33ccff"; break; case "orange": selectedFontColor = "#ff9900"; break; } redrawTextsCan11(); } function chfont5(v5) { switch (v5) { case "franklin": selectedTextFont = "Franklin Gothic"; break; case "impact": selectedTextFont = "Impact"; break; } redrawTextsCan11(); } 

  #canvas4 { border: 2px dotted red; border-radius: 5px; } #canvas11 { border: 2px dotted red; border-radius: 5px; } .littleblue { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: #33ccff; } .littleblue:hover, .littleblue:active, .littleblue:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } .orange { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: orange; } .orange:hover, .orange:active, .orange:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3> <button type="button" class="littleblue" data-id="littleblue" onclick="clubNameColor(this)"></button> <button type="button" class="orange" data-id="orange" onclick="clubNameColor(this)"></button> <h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3> <select name="Font" onchange="changeClubNameFontFamily(this.value)"> <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option> <option value="impact" style="font-family: Impact">IMPACT</option> </select> <h3 style="font-size: 15px;padding-top: 10px">Write text</h3> <form action="" method="POST" id="clubNameTag" class="nametag"> Line1: <input type="text" id="clubNameLine1" maxlength="12" name="line1" style="width:220px; height: 30px" /> <br> <canvas id="canvas4" width=110 height=30 style=" position: absolute; top: 20px; left: 134px; z-index: 10; "></canvas> <!-- second one --> <h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3> <button type="button" class="littleblue" data-id="littleblue" onclick="color11(this)"></button> <button type="button" class="orange" data-id="orange" onclick="color11(this)"></button> <h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3> <select name="Font" onchange="chfont5(this.value)"> <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option> <option value="impact" style="font-family: Impact">IMPACT</option> </select> <h3 style="font-size: 15px;padding-top: 10px">Write text</h3> <form action="" method="POST" id="nametag2" class="nametag"> Line1: <input type="text" id="line4" maxlength="12" name="line1" style="width:220px; height: 30px" /> <canvas id="canvas11" width=110 height=30 style=" position: absolute; top: 60px; left: 134px; z-index: 10; "></canvas> 

Answer 1

在您的HTML中，缺少结尾的表单标签，因此第二个表单位于第一个表单内。 当我在jsFiddle上添加结束表单标签时，一切正常。

它不起作用的原因是，下面绘制“ Can4”的事件处理程序也被第二个表单上输入的更改触发（在添加缺少的表单标签之前，在redrawTextsCan4函数中添加了警报，您将看到它出现在在下部输入字段中键入一个字符）。

$('#clubNameTag').bind('change keyup input', redrawTextsCan4);

综上所述，答案是添加缺少的结束表单标签。