jCanvas中的输出表单输入值答案

【问题标题】：Output form input value in jCanvasjCanvas中的输出表单输入值
【发布时间】：2017-04-05 11:50:13
【问题描述】：

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

姓名 [John Doe]

然后将 John Doe 输出到 jCanvas。

我想我知道什么会起作用，但我不确定如何将它变成有效的 jQuery 代码。伪代码如下：

var input = #input.val

canvas.drawText(

    input

    (dimensions go here)
)

【问题讨论】：

标签： javascript jquery html5-canvas jcanvas

【解决方案1】：

下面的代码实现了您正在寻找的输出。

总的来说，我们：

在#name 输入上监听keyup 事件
每当发生这种情况时，将输入值存储到 inputString 变量中
调用 jCanvas 的 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>

【讨论】：