jCanvas中的输出表单输入值

Question

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

名称[John Doe的]

John Doe的随后将被输出到一个jCanvas。

我想我有一个关于什么可以工作的想法，但我不知道如何使它成为有效的jQuery代码。下面的伪代码：

var input = #input.val 

canvas.drawText(

    input 

    (dimensions go here) 
) 

Answer 1

下面的代码实现，你要寻找的输出。

总之我们：

• 请收听#name输入
• 存储输入到inputString变量，每当发生这种情况
• 呼叫jCanvas的clearCanvas方法删除的价值keyup事件任何现有的文字在画布上
• 最后使用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>