Question

我一直在创建一个画布，你可以在我的画布上生成文本和显示。

POST按钮和CLEAR按钮在First处理正常！

我遇到的下一个问题/错误是当我输入一个新单词并单击POST时，之前的“已清除”字母将再次出现。

function updateTotal(){

if (document.getElementById('design3').checked) {
          var canvas2 = document.getElementById("displaycake_text");
              context = canvas2.getContext("2d");

          var $canvas2 = $("#displaycake_text");
          var canvasOffset = $canvas2.offset();
          var offsetX = canvasOffset.left;
          var offsetY = canvasOffset.top;
          var scrollX = $canvas2.scrollLeft();
          var scrollY = $canvas2.scrollTop();
          var startX;
          var startY;
          var texts = []; // an array to hold text objects
          var selectedText = -1;// this var will hold the index of the hit-selected text

        function draw() { // clear the canvas & redraw all texts
          context.clearRect(0, 0, canvas2.width, canvas2.height);
            for (var i = 0; i < texts.length; i++) { var text = texts[i];
              context.fillText(text.text, text.x, text.y);  }
          }

        function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
          var text = texts[textIndex];
            return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
            }

        function handleMouseDown(d) {
           d.preventDefault();
              startX = parseInt(d.clientX - offsetX);
              startY = parseInt(d.clientY - offsetY);
          
            for (var i = 0; i < texts.length; i++) {
              if (textHittest(startX, startY, i)) {
                selectedText = i; }  }
          }

        function handleMouseUp(d) { // done dragging
          d.preventDefault();
            selectedText = -1;  }

        function handleMouseOut(d) { // also done dragging
            d.preventDefault();
            selectedText = -1;  }

        function handleMouseMove(d) {
          if (selectedText < 0) { return; }
          d.preventDefault();
            mouseX = parseInt(d.clientX - offsetX);
            mouseY = parseInt(d.clientY - offsetY);

              var dx = mouseX - startX;
              var dy = mouseY - startY;
              startX = mouseX;
              startY = mouseY;
              var text = texts[selectedText];
              text.x += dx;
              text.y += dy;
              draw();     }
          
          $("#displaycake_text").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
          $("#displaycake_text").mousemove(function (d) { handleMouseMove(d); });
          $("#displaycake_text").mouseup(function (d) {   handleMouseUp(d); });
          $("#displaycake_text").mouseout(function (d) {  handleMouseOut(d);  });
          $("#text_dedi").click(function () {
              var y = texts.length * 20 + 20; // calc the y coordinate for this text on the canvas
              var text = {  text: $("#dedi_text").val(),
                  x: 20,
              y: y
               };

            context.font = "30px Roboto";
            text.width = context.measureText(text.text).width;
            text.height = 16;
            text.color = "#ffffff";   
            texts.push(text); // put this new text in the texts array
            draw(); // redraw everything

          
          });
          
          //this is the code for CLEAR BUTTON
          document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas2.width, canvas2.height);  texts = []; }, false);
        }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <!-- PLS CLICK THE RADIO BUTTON FIRST THEN INSERT & POST -->
<br> <input type="radio" id="design3" name="design_3"  onchange="updateTotal()" />
<span class="radio-chosen"></span> Dedication
<h2> 
  <div class="disp_dedi off"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication"> 
<button id="text_dedi"> Post </button>  
  <input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()">  </div>


<canvas id="displaycake_text" height="200px" width="400px" style="border-color: #fff; border-style: solid;"> </canvas>

文本功能正常工作以及拖动（我刚刚找到它的来源）但我的CLEAR按钮是问题，它仍然显示我删除的文本。拜托，我希望有人能帮助我。非常感谢你！

Answer 1

正如@Kaddath在评论中所说，当你点击清除按钮时，texts数组没有被清空。清除画布时尝试清除它：

document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas2.width, canvas2.height);
          texts = [];
  }, false);

Answer 2

对我有用：

function clear_canvas(canvas) {
  canvas.width = canvas.width;
}

html5 canvas永久清除

2 个答案: