gpt4 book ai didi

javascript - 在输入过程中使文本实时显示在 Canvas 上

转载 作者:行者123 更新时间:2023-11-28 00:10:45 25 4
gpt4 key购买 nike

我希望用户在 Canvas 元素之外输入文本,并实时或在按下按钮时将其显示在 Canvas 上。

我对 Canvas 和 JavaScript 还很陌生。

谢谢。

最佳答案

这是简单的模式。您可以在此处了解有关 Canvas 中文本的更多信息: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>

关于javascript - 在输入过程中使文本实时显示在 Canvas 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55416275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com