我的网页中有一个 Canvas 元素，其中包含一些我想用文本框编辑的文本。例如， Canvas 中的文本是“这是一个苹果”，但后来我想更改该文本，如下所示“Apple我从来不喜欢”这件事应该通过 JavaScript 或 jQuery 的文本框按键事件来完成。请给我一些建议。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("This is a apple", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
</script>
<input id="sourceText1" type=text>
</body>
</html>我想用文本框更改文本。
最佳答案
这里有一些适用于您当前示例的代码。然而，它存在严重缺陷 - 我想非常清楚地说明这一点。
0) 我必须添加 4 个像素才能让删除矩形正确覆盖文本。我不确定为什么需要这个，或者如何查询/计算它 - 我使用了图像编辑器。如果您的文本大小不同，我想您需要使用不同于 4 的“魔数(Magic Number)”。
1) 如果背景不是白色，尤其是当您有图案而不是纯色时，该示例将失败。
2)每次击键都会删除并重新绘制整个文本 - 理想情况下，我们应该只在必要时才清除它。即 - 如果文本变长并且新文本在新字符之前都是相同的，则没有任何内容可以删除。
3)我太累了，无法进一步检查我的代码是否存在缺陷。
4)您几乎可以肯定(实际上我有 99.9999999% 的把握)找到已经完成此类任务的代码 - 代码更加健壮，并且可以用于生产。
将此代码视为“有效的黑客”。如果我可以将其仅作为评论发布，我会的。
也许更好的选择是简单地再次绘制文本，使用白色作为颜色 - 尽管我有一种感觉，由于抗锯齿，这不会完全起作用，这会留下微弱的轮廓 - 无法正确覆盖现有文本。
如果代码不适合您，只需将其与收据一起带回即可获得全额退款。 :笑:
也就是说，给你:
<!DOCTYPE html>
<html>
<head>
<script>
function byId(id){return document.getElementById(id);}
window.addEventListener('load', onDocLoaded, false);
var textPosX = 10, textPosY = 50;
var defaultText = "This is a apple";
var curText = defaultText;
var defaultFont = "20px Georgia";
function onDocLoaded(evt)
{
// add event listener to the input element, this will fire any time (text) input is received
byId('sourceText1').addEventListener('input', onSourceTextInput, false);
var c = byId("myCanvas");
var ctx = c.getContext("2d");
ctx.font = defaultFont;
ctx.fillText(defaultText, textPosX, textPosY);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
}
function onSourceTextInput(evt)
{
var can = byId('myCanvas');
var ctx = can.getContext('2d');
var curTextWidth, curTextHeight;
curTextWidth = ctx.measureText(curText).width;
curTextHeight = 20;
var curStyle = ctx.fillStyle;
ctx.fillStyle = "white";
ctx.fillRect(textPosX, (textPosY-curTextHeight)+4, curTextWidth, curTextHeight);
ctx.fillStyle = 'BLACK';
ctx.font = defaultFont;
ctx.fillText( this.value, textPosX, textPosY );
ctx.fillStyle = curStyle;
curText = this.value;
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<input id="sourceText1" type='text'/>
</body>
</html>
关于javascript - 页面加载后更新 Canvas 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36809830/