javascript HTML Canvas - 动态更改文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31882814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Canvas - change text dynamically
提问by SNos
I am trying to change the text on my html canvas while I type inside an input text field.
当我在输入文本字段中键入时，我试图更改 html 画布上的文本。
I can add the text however, if I delete and type again the new text is added on the top of the old one.
但是，我可以添加文本，如果我删除并再次键入，新文本将添加到旧文本的顶部。
document.getElementById('title').addEventListener('keyup', function() {
var stringTitle = document.getElementById('title').value;
console.log(stringTitle);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
var text_title = stringTitle;
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
});
采纳答案by Shashwat Black
This works. You just clear the canvas every time it's updated.
这有效。您只需在每次更新时清除画布。
document.getElementById('title').addEventListener('keyup', function() {
var stringTitle = document.getElementById('title').value;
console.log(stringTitle);
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
var text_title = stringTitle;
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
});
UPDATE
更新
In case you only want to update the area where the text is, you can do just that,
如果您只想更新文本所在的区域，您可以这样做，
ctx.fillRect(0, 130, canvas.width, 70);
Another approach would be, keeping track of the text as well as other objects in the canvas and refreshing the entire canvas. This is not as memory intensive as you'd think. If you want, you could also reset the canvas only when the text has been deleted (completely or partially), by comparing the previous string with new one.
另一种方法是跟踪画布中的文本以及其他对象并刷新整个画布。这并不像您想象的那样占用大量内存。如果需要，您也可以仅在文本被删除（完全或部分）时重置画布，方法是将前一个字符串与新字符串进行比较。
回答by j08691
You can save the state of the canvas, update the content, then restore it via:
您可以保存画布的状态，更新内容，然后通过以下方式恢复它：
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById('title').addEventListener('keyup', function () {
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
var stringTitle = document.getElementById('title').value;
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
var text_title = stringTitle;
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
ctx.restore();
});<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<input type="text" id="title" placeholder="Your Title" />
</br>回答by user3896501
try replace last few line with this
尝试用这个替换最后几行
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
by canvas limitation, you must redraw whole canvas in order to update its content
由于画布限制，您必须重绘整个画布才能更新其内容
回答by skyfoot
I would add your text to an array and then clear the canvas after every time you type and redraw all the text.
我会将您的文本添加到一个数组中，然后在您每次键入和重绘所有文本后清除画布。
As the letter are different widths and so are spaces and backspaces you can't be certain you will exactly clear the letter you want to delete.
由于字母的宽度不同，空格和退格也不同，因此您无法确定是否会完全清除要删除的字母。
