在jCanvas中输出表单输入值

Question

将文本输入值输出到jCanvas的有效代码是什么？ 例如：

名字[ John Doe ]

然后将John Doe输出到jCanvas上。

我想我对可行的方法有所了解，但不确定如何将其转换为有效的jQuery代码。 伪代码如下：

var input = #input.val

canvas.drawText(

    input

    (dimensions go here)
)

Answer 1

下面的代码实现所需的输出。

总而言之，我们：

• 监听#name输入上的keyup事件
• 每当发生这种情况时，将输入的值存储到inputString变量中
• 调用clearCanvas方法以删除画布上的任何现有文本
• 最后使用jCanvas的drawText方法将文本打印到画布上

 $(document).ready(function() { var inputString; $('#name').on('keyup', function () { inputString = $(this).val(); $('canvas').clearCanvas(); $('canvas').drawText({ fillStyle: '#000', x: 50, y: 50, fontSize: 30, align: 'left', respectAlign: true, fontFamily: 'Verdana, sans-serif', text: inputString }); }); }); 

 <form> <label for="name">Name: </label> <input type="text" id="name" maxlength="25" /> </form> <canvas width="600" height="300"></canvas> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.js"></script>