jCanvasの出力フォーム入力値

Question

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

名前[ジョン・ドウ]

ジョン・ドウはその後jCanvas上に出力されることになります。

私は何がうまくいくか考えていますが、有効なjQueryコードにする方法がわかりません。下記の擬似コード：

var input = #input.val 

canvas.drawText(

    input 

    (dimensions go here) 
) 

Answer 1

以下のコードは、あなたが探している出力を実現しています。要約すると

たち：

• #name入力
• ストアこれは
• コールjCanvasのclearCanvas方法を削除するために発生するたびにinputString変数への入力の値にkeyupイベントをリッスンしキャンバス上の既存のテキスト
• 最後に、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>