Question

我正在处理一些图像操作，我正在尝试使用基本画布，现在我有一个文本框如果我输入任何文本，它应该立即在画布上更改，我需要该文本在画布上移动并记录这是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>

Answer 1

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

这样做：

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

使用HTML5 Canvas

1 个答案: