HTML Canvas - 动态更改文本答案

【问题标题】：HTML Canvas - change text dynamicallyHTML Canvas - 动态更改文本
【发布时间】：2015-08-07 16:44:51
【问题描述】：

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

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

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

【问题讨论】：

在显示文本之前需要清除画布

标签： javascript jquery html canvas

【解决方案1】：

您可以保存画布的状态，更新内容，然后通过以下方式恢复它：

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>

【讨论】：

为什么是save() 和restore()？
@Kaiido - 这是我用了一段时间的东西，主要用于画布转换，但我发现它同样适用于简单的重绘。
实际上它最终只会保存你的fillStyle 和font 属性（甚至不确定）并且是相当消耗的方法，如果你不处理转换，你应该避免
@Kaiido 在这种情况下，这些是非常必要的，因为一旦将fillstyle 更改为#fff，fillRect 在下一次调用中将用白色填充画布，即不是我们想要的。 save 和 restore 在使用转换时非常方便。
@j08691。 context.save & context.restore 将保存和恢复整个上下文状态（例如所有样式、转换、复合设置等）。由于 .save 和 .restore 的成本适中，您可以改为从 var previousFill=ctx.fillStyle 开始，并以 ctx.fillStyle=previousFill 仅重置 fillStyle 结束。 :-)

【解决方案2】：

这行得通。您只需在每次更新时清除画布即可。

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

更新

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

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

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

【讨论】：

这可行，但是如果我在画布上有其他东西，它将清除那里的所有其他东西
在这种情况下，您只需清除文本所在的区域。我会更新答案，请稍等。

【解决方案3】：

尝试用这个替换最后几行

ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);

受画布限制，您必须重绘整个画布才能更新其内容

【讨论】：

【解决方案4】：

我会将您的文本添加到一个数组中，然后在您每次键入并重绘所有文本后清除画布。

由于字母的宽度不同，空格和退格也不同，因此您无法确定是否会完全清除要删除的字母。

【讨论】：

ctx.measureText()怎么样