如何使用javascript将textarea文本转换为画布图像？
我正在尝试将textarea文本转换为画布图像。该文本需要作为图像显示在画布中。但有时我的文本在画布上完美地呈现出来，但句子却在分解成单词并切换到下一行。由于句子格式不正确，出现了换行。我想在我的文本区域和画布中以换行格式显示文本。在我下面的代码中，我没有得到任何输出。请给我最好的建议如何使用javascript将textarea文本转换为画布图像？,javascript,image,canvas,word-wrap,textinput,Javascript,Image,Canvas,Word Wrap,Textinput,我正在尝试将textarea文本转换为画布图像。该文本需要作为图像显示在画布中。但有时我的文本在画布上完美地呈现出来，但句子却在分解成单词并切换到下一行。由于句子格式不正确，出现了换行。我想在我的文本区域和画布中以换行格式显示文本。在我下面的代码中，我没有得到任何输出。请给我最好的建议 <body> <canvas id="myCanvas" width="578" height="400"></canvas> <form id="m
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<form id="myForm">
Text: <input id="myText" placeholder="your text"/>
<br />
<input type="submit" value="submit" />
</form>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function()
{
context.drawImage(imageObj, 0, 0);
}
imageObj.src = "https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-
17.jpg";
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e)
{
var text = document.getElementById('myText').value;
if(text.length == 0)
{
alert("you forgot to put something");
}
else
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = document.getElementById("myText").value;
context.font = "16pt Calibri";
context.fillStyle = "#333";
context.fillText(text, 50, 50);
wrapText(context, text, x, y, maxWidth, lineHeight);
e.preventDefault();}
});
</script>
</body>
正文：
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var imageObj=新图像（）；
imageObj.onload=函数（）
{
drawImage（imageObj，0,0）；
}
imageObj.src=”https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-
17.jpg”；
var myForm=document.getElementById（'myForm'）；
myForm.addEventListener（'submit'，函数（e）
{
var text=document.getElementById（'myText'）。值；
如果（text.length==0）
{
警惕（“你忘了放东西”）；
}
其他的
{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var maxWidth=400；
var-lineHeight=25；
var x=（canvas.width-maxWidth）/2；
变量y=60；
var text=document.getElementById（“myText”）.value；
context.font=“16pt Calibri”；
context.fillStyle=“#333”；
context.fillText（text，50,50）；
wrapText（上下文、文本、x、y、最大宽度、线宽）；
e、 preventDefault（）；}
});