使用 HTML5 画布答案

【问题标题】：Working with HTML5 Canvas使用 HTML5 画布
【发布时间】：2011-10-26 15:22:01
【问题描述】：

我正在处理一些图像操作，我正在尝试制作一个基本画布，现在我有一个文本框它是 X 和 Y 位置。那么我该怎么做呢？

这是我的代码：

    <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

    var drawLogo = function () {
        var canvas = document.getElementById('my_canvas');
        var context = canvas.getContext('2d');
        context.font = 'italic 40px sans-serif';
        context.textBaseline = 'top';
        context.fillText('Some text', 60, 0);

    };

    $(function () {
        var canvas = document.getElementById('my_canvas');
        if (canvas.getContext) {
            drawLogo();
        }
    }); 
</script>
</head> 
<body>
<canvas id="my_canvas" width="900" height="300">
Fallback content here
</canvas>
    <input id="Text1" type="text" />
</body>
</html>

【问题讨论】：

标签： html text canvas html5-canvas

【解决方案1】：

首先，每次文本更改时，您都需要重新绘制整个画布。

这样做：

在您的 drawLogo 函数中添加一个 myText、x 和 y 输入：drawLogo(myText, x, y) 并将这一行更改为 context.fillText(myText, x, y);
要更改画布上的文本，请将 JS 事件处理程序添加到文本框并调用新的 drawLogo 函数并传递所有 3 个输入参数。
请记住，您不能修改在画布上绘制的内容。您只能绘制一次，因此所有修改器都必须一次完成。
运动部分不清楚，但您需要事先在 JS 中计算运动方程。当您调用新的 drawLogo(myText, x, y) 时，您将从 JS 传递这些值。
注意这一行 context.textBaseline = 'top';上次我检查它在 Firefox 中不受支持。

【讨论】：