javascript - 我怎样才能有两个带有两个 Canvas 的输入文本

Question

在我的代码中，我有两个可以输入文本的 Canvas 。当我写文本时，它适合 Canvas (字体大小正在减小)而且我还可以更改颜色和字体系列。

因此，当我写入第一个输入文本时，它会出现在第一个 Canvas 上。但是当我尝试在第二个输入文本上书写时，它不会显示在第二个 Canvas 上(如果我按下蓝色按钮更改颜色，然后才会显示)。这是 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);

总而言之，答案是添加缺少的结束表单标签。