gpt4 book ai didi

javascript - 将文本从表单发送到 Canvas 元素中的文本时,删除文本不起作用

转载 作者:行者123 更新时间:2023-11-28 03:32:55 26 4
gpt4 key购买 nike

现在我有一个表单,我可以在其中输入一些文本,它出现在 Canvas 元素中,然而,当我按下退格键时,文本不会再消失,当我重新输入文本时,它会出现在旧文本之上。

有没有办法让 Canvas 元素也响应删除文本?

<!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>

最佳答案

每次在 Canvas 上绘制一些新文本之前,您都需要清除 Canvas ,否则您已经在 Canvas 上绘制的任何内容都将保留,您将在其上绘制。

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 个绘图函数的开头。

关于javascript - 将文本从表单发送到 Canvas 元素中的文本时,删除文本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16459169/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com