在輸入期間實時在畫布上顯示文本
[英]Make text display on canvas in real-time during input
問題描述
我希望用戶在canvas元素之外輸入文本，並使其在畫布上實時顯示或按下按鈕時顯示。
我是canvas和JavaScript的新手。
謝謝。
1 個解決方案
解決方案1
0 2019-03-29 16:48:36
這是簡單的模式。 您可以在此處了解有關畫布中文本的更多信息： https ： //www.w3schools.com/graphics/canvas_text.asp
/* Very basic canvas setup */ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); /* Function what is called on every input change */ var UserInput = document.getElementById("UserInput"); UserInput.oninput = function() { // Sending to console text which is now in input //console.log(UserInput.value); /* Drawing text taken from input on 100, 100 */ ctx.font = "30px Arial"; ctx.fillText(UserInput.value, 100, 100); };
<html> <head> </head> <body> <canvas id="myCanvas" width="500" height="250" style="border:1px solid #000000;"> </canvas> <input type = "text" id = "UserInput"> </body> </html>
關於socket.io實時文本顯示的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.