2

现在我有一个表单，我可以在其中输入一些文本，它出现在画布元素中，但是当我按下退格键时，文本不再消失，当我重新输入文本时，它出现在旧文本的顶部。

有没有办法让画布元素也响应删除文本？

<!DOCTYPE html>
<html>


 <title>dropIn Print Generator</title>




<body>
<h1>dropIn Print Generator</h1>

<form method="post" action="run.php">
<p>brand name
<input type="text" id="brand" onkeyup="showBrand(this.value)" /></p>
<p>product name
<input type="text" id="product" onkeyup="showProductName(this.value)" /></p>
<p>product details
<input type="text" id="details" onkeyup="showProductDetail(this.value)" /></p>
<p>product sku
<input type="text" id="sku" /></p>
<p>product image
<input type="file" id="image" /></p>

</form>

<canvas id="mainCanvas" width="400" height="600" style="border:1px solid #000000;"></canvas>

<script>
    var canvas = document.getElementById('mainCanvas');
    var context = canvas.getContext('2d');

    // begin upper shape
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(400, 0);
    context.lineTo(400, 300);
    context.lineTo(380, 30);
    context.lineTo(0, 50);
    context.lineTo(0, 0);

    // complete upper shape
    context.closePath();
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.fillStyle = 'black';
    context.fill();
    context.stroke();

    // begin bottom shape
    context.beginPath();
    context.moveTo(400, 600);
    context.lineTo(200, 600);
    context.lineTo(400, 585);
    context.lineTo(400, 600);

    // complete bottom shape
    context.closePath();
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.fillStyle = 'black';
    context.fill();
    context.stroke();




    function showBrand(str){  
        context.fillStyle = 'black';
        context.font = '20px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText(str, 30, 100);          
        }

    function showProductName(str){   
        context.fillStyle = 'black';
        context.font = '30px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText(str, 30, 135);
        }

    function showProductDetail(str){   
        context.fillStyle = 'black';
        context.font = '20px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText(str, 30, 160);
      }

  </script>
</body>
</html>
4

1 回答 1

0

每次在画布上绘制一些新文本之前，您都需要清除画布，否则您已经在画布上绘制的任何内容都将保留下来，您将在其上进行绘制。

function clearCanvas() {
    // Redraw the background color over the top of the old text to 'clear' it.
    context.fillStyle = '#fff';
    context.fillRect(0, 0, canvas.width, canvas.height);
}

在其他 3 个绘图函数的开头添加对该函数的调用。

于 2013-05-09T10:16:30.730 回答