Fatal编程技术网
  • javascript/
  • Javascript 用户键入时换行文本

Javascript 用户键入时换行文本

javascript canvas

Javascript 用户键入时换行文本,javascript,canvas,Javascript,Canvas,我有一个用户输入的文本区域。当用户在文本区域字段中键入时，该文本在画布上呈现。所以一个字母一个字母地出现。我很难使文本包装正常工作，因为它应该在用户键入时发生 我有一个函数drawtext（）；每次击键时都会调用。我遇到的问题是，当文本在下一行上绘制时，上一行消失了。我知道这是因为我在for循环中调用了clearRect。但是，如果我不这样做，那么我的文本会继续相互渲染。我怎样才能解决这个问题 function drawText () { var maxWidth = 500; var tex

我有一个用户输入的文本区域。当用户在文本区域字段中键入时，该文本在画布上呈现。所以一个字母一个字母地出现。我很难使文本包装正常工作，因为它应该在用户键入时发生

我有一个函数drawtext（）；每次击键时都会调用。我遇到的问题是，当文本在下一行上绘制时，上一行消失了。我知道这是因为我在for循环中调用了clearRect。但是，如果我不这样做，那么我的文本会继续相互渲染。我怎样才能解决这个问题

function drawText () {

var maxWidth = 500;
var textAreaString = $('textarea').val()+' ';
var theCanvas = document.getElementById("myCanvas");
var ctx = theCanvas.getContext('2d');
ctx.fillStyle = colors[currentBackground];
ctx.fillRect(0,0,598,335);
ctx.font = "50px Interstate";
ctx.textAlign = 'center';

var x = 300;
var y = 75;
var lineHeight = 50;
var words = textAreaString.split(' ');
var line = '';

for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = ctx.measureText(testLine);
    ctx.clearRect(0,0,598,335);

    ctx.fillStyle = '#ffffff';
    var testWidth = metrics.width;

    if (testWidth > maxWidth && n > 0) {
        ctx.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
    } else {
        ctx.fillText(line, x, y);
        line = testLine;
    }
}

函数drawText（）{
var maxWidth=500；
var textAreaString=$（'textarea'）.val（）+''；
var theCanvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=颜色[currentBackground]；
ctx.fillRect（0,0598335）；
ctx.font=“50px州际”；
ctx.textAlign='中心'；
var x=300；
变量y=75；
var线宽=50；
var words=textAreaString.split（“”）；
var行=“”；
for（var n=0；nmaxWidth&&n>0）{
ctx.fillText（行，x，y）；
行=字[n]+''；
y+=线宽；
}否则{
ctx.fillText（行，x，y）；
直线=测试线；
}
}
}

将此行移出
for
循环。在绘制每条线之前，您将清除画布，因此循环结束时，只有最后一条线可见

ctx.clearRect(0,0,598,335);
哎呀，我的答案是重复的！@Will Anderson说了什么（当他正确发帖时，我正在键入我的答案）

清除for循环之前的画布，然后重新绘制所有文本行

示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$text=document.getElementById（“sourceText”）；
$text.onkeyup=函数（e）{
clearRect（0,0，canvas.width，canvas.height）；
wrapText（ctx，$text.value，20,60100,24，“verdana”）；
}
函数wrapText（上下文、文本、x、y、maxWidth、fontSize、fontFace）{
var words=text.split（“”）；
var行=“”；
var lineHeight=fontSize；
context.font=fontSize+“”+fontFace；
for（var n=0；nmaxWidth）{
填充文本（行，x，y）；
行=字[n]+''；
y+=线宽；
}
否则{
直线=测试线；
}
}
填充文本（行，x，y）；
返回（y）；
}
}); // end$（函数（）{}）；
键入要包装到画布中的文本。
接受您的答案，因为我的
context.fillText（行，x，y）也被错误地放置。多亏了你的代码，我才得以修复它。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var $text=document.getElementById("sourceText");
    $text.onkeyup=function(e){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        wrapText(ctx,$text.value,20,60,100,24,"verdana");
    }

    function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
      var words = text.split(' ');
      var line = '';
      var lineHeight=fontSize;

      context.font=fontSize+" "+fontFace;

      for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if(testWidth > maxWidth) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        }
        else {
          line = testLine;
        }
      }
      context.fillText(line, x, y);
      return(y);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Type text to wrap into canvas.</h4>
    <input id=sourceText type=text><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>