0

テキスト入力の値を jCanvas に出力するための有効なコードは何でしょうか? 例えば：

名前 [ジョン・ドウ]

John Doe は jCanvas に出力されます。

何がうまくいくかについては考えがあると思いますが、それを有効なjQueryコードにする方法がわかりません。以下の疑似コード:

var input = #input.val

canvas.drawText(

    input

    (dimensions go here)
)
4

1 に答える 1

1

以下のコードは、探している出力を実現します。

要約すると、次のとおりです。

  • 入力でkeyupイベントをリッスンする#name
  • inputStringこれが発生するたびに、入力の値を変数に格納します
  • jCanvasのclearCanvasメソッドを呼び出して、キャンバス上の既存のテキストを削除します
  • 最後drawTextに jCanvas のメソッドを使用してテキストをキャンバスに出力します

$(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>

于 2016-11-22T14:24:06.807 に答える