[英]Output form input value in jCanvas
將文本輸入值輸出到jCanvas的有效代碼是什么? 例如:
名字[ John Doe ]
然后將John Doe輸出到jCanvas上。
我想我對可行的方法有所了解,但不確定如何將其轉換為有效的jQuery代碼。 偽代碼如下:
var input = #input.val
canvas.drawText(
input
(dimensions go here)
)
下面的代碼實現所需的輸出。
總而言之,我們:
#name
輸入上的keyup
事件 inputString
變量中 clearCanvas
方法以刪除畫布上的任何現有文本 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.