我有一个用户输入的文本区域。当用户在文本区域字段中键入时，该文本在画布上呈现。所以它逐字逐句显示。我无法正确处理文本包装，因为它应该在用户输入时发生。
我有一个函数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;
}
}
}
答案 0 :(得分：2)
糟糕 - 我的回答是重复的！ @Will Anderson说什么（我在正确发布时输入了我的答案）
在for-loop 之前清除画布，然后重新绘制所有文本行。
示例代码和演示：http://jsfiddle.net/m1erickson/7d5bs/
<!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>
答案 1 :(得分：1)
将此行移出for循环。您在绘制每一行之前清除画布，因此在循环结束时只有最后一行可见。
ctx.clearRect(0,0,598,335);