HTML Canvas - 动态更改文本

当我在输入文本字段中输入内容时，我试图更改 html 画布上的文本。

但是，我可以添加文本，如果我删除并再次输入，新文本将添加到旧文本的顶部。

JSFIDDLE https://jsfiddle.net/bm7jv7bk/1/

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);
    });

这有效。您只需在每次更新时清除画布即可。

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

如果您只想更新文本所在的区域，您可以这样做，

ctx.fillRect(0, 130, canvas.width, 70);

另一种方法是跟踪文本以及画布中的其他对象并刷新整个画布。这并不像您想象的那样需要大量内存。如果需要，您还可以仅在文本被删除（完全或部分）时通过将前一个字符串与新字符串进行比较来重置画布。