Question

我的网页中有一个画布元素，其中包含一些我想用文本框编辑的文本。例如，画布中的文字是“这是一个苹果”，但后来我想改变这样的文字“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>

我想用文本框更改文字。

Answer 1

这里有一些适用于您当前示例的代码。然而，这是非常有缺陷的 - 我想非常清楚。

0）我必须添加4个像素才能让删除矩形正确覆盖文本。我不确定为什么需要这个，或者如何查询/计算这个 - 我使用了图像编辑器。如果你的文字大小不同，我想你需要使用一个不同的魔法数字＆＃39;比4。

1）如果背景不是白色，示例将会分解，特别是如果您有图案而不是纯色。

2）每次按键都会删除整个文本并重新绘制 - 理想情况下，我们应该在必要时清除它。即 - 如果文本变长并且新文本在新角色之前一直相同，则无需删除。

3）我太累了，无法进一步检查我的代码是否有缺陷。

4）几乎可以肯定（实际上我确实约99.9999999％肯定）找到了执行此类任务的代码 - 代码更强大，并且可以投入生产。

考虑这个代码只不过是＆＃34;一个有效的hack＆＃34;。如果我只是作为评论发布它，我会。

也许更好的选择是简单地再次绘制文本，使用白色作为颜色 - 尽管我感觉这不会起作用，因为反锯齿会留下微弱的轮廓 - 失败妥善覆盖现有文本。

如果代码不适合您，只需将其与收据一起带回即可获得全额退款。：笑：

那就是说，你走了：

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

页面加载后更新画布文本

1 个答案: