typeText()。
typeText()基本上启动了打字机效果，但它会持续掉落并且我真的很难找到解决单词换行的方法。...
var maxWidth = 250;
var text = 'lorem ipsum dolor et sit amet...';
var words = text.split(' ');
var line = [words[0]]; //begin with a single word
for(var i=1; i<words.length; i++){
while(ctx.measureText(line.join(' ')) < maxWidth && i<words.length-1){
line.push(words[i++]);
}
if(i < words.length-1) { //Loop ended because line became too wide
line.pop(); //Remove last word
i--; //Take one step back
}
//Ouput the line
}
由于似乎没有办法测量输出文本的高度，您需要手动偏移每行输出的一些硬编码行高。
我弄不明白你的Text构造函数是怎么工作的。所以我写了一个独立的函数（不属于任何对象）。你只需要传递给这个函数一个字符串、X和Y位置、行高和内边距。它假设画布被分配给变量canvas，2D上下文被分配给变量ctx。
var canvas, ctx;
function typeOut(str, startX, startY, lineHeight, padding) {
var cursorX = startX || 0;
var cursorY = startY || 0;
var lineHeight = lineHeight || 32;
padding = padding || 10;
var i = 0;
$_inter = setInterval(function() {
var w = ctx.measureText(str.charAt(i)).width;
if(cursorX + w >= canvas.width - padding) {
cursorX = startX;
cursorY += lineHeight;
}
ctx.fillText(str.charAt(i), cursorX, cursorY);
i++;
cursorX += w;
if(i === str.length) {
clearInterval($_inter);
}
}, 75);
}
点击这里查看演示。
提示-
我正在查看你的代码，发现了这样的东西-
function Rectangle(x,y,width,height,colour) {
//properties
this.draw = function() { //Don't assigns object methods through constructors
ctx.fillStyle = this.colour;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
不应该通过构造函数向对象添加方法，因为这会在每次实例化对象时创建该方法。相反，应该将方法添加到对象的原型中，这样它们只会被创建一次，并且将被所有实例共享。例如：
function Rectangle(x,y,width,height,colour) {
//properties
}
Rectangle.prototype.draw = function() {
ctx.fillStyle = this.colour;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
另外，我发现你正在创建额外的变量来指向某些对象。例如 -
var that = this;
var fadeIn = setInterval(function() {
//code
that.draw();
//code
}, time);
您不应该创建一个额外的指向 Text 对象的引用。使用 bind 方法，这样 this 就会指向 Text 对象。例如：
var fadeIn = setInterval(function() {
//code
this.draw(); // <-- Check this it is `this.draw` no need for `that.draw`
//code
}.bind(this), time); //bind the object
了解有关绑定此处的更多信息。
希望这有所帮助。
附言：每个字符需要75毫秒，那将是每分钟800个字符！！！
更新 - 如果你需要可扩展的图形，你应该考虑 SVG。Canvas 是基于光栅的，而 SVG 是基于矢量的。这意味着 SVG 可以轻松地调整大小，而当你调整 Canvas 的大小时，Canvas 的内容将开始出现像素化并且变得模糊。阅读更多。
要调整 Canvas 的内容大小，你需要重新绘制整个 Canvas。每当在 Canvas 上绘制某些内容时，浏览器都会进行绘制然后忘记它。因此，如果你想更改对象的大小/位置，你需要完全清除 Canvas 并重新绘制对象。在你的情况下，你需要根据 Canvas 的大小更改 ctx.font 然后更新 Canvas，这将是一个非常繁琐的任务。
this.draw = function(){} 来定义对象方法。不知道是否有任何标准可以遵循？至于 that = this;，我之前并不知道 .bind() 的存在，这对我很有帮助。 - Jamesking56<canvas> 不是为文本处理而设计的。通过在 <canvas> 顶部叠加透明的 DOM 元素，这样做会更加容易。当然，这假设您不需要在 <canvas> 中后处理文本像素。否则，您需要在 Javascript 中重新实现整个文本处理过程，这有点像重复造轮子，因为浏览器可以为我们简单地完成它。
以下是使用 CSS position: absolute 和 position: relative 执行此操作的更多信息。
我认为您应该拥有一个具有所有文本的透明颜色的 DOM 元素，每个字母都包裹在一个 <span> 中。然后，通过调整不透明度来使这些 <span> 可见。这样，字母位置就不会改变。
<span>标签个人而言，在我的画布游戏中需要文本时，我总是使用位图字体。它有几个优点：
通过使用各种合成操作选择字体颜色，通过动态调整绘制宽度高度来选择字体大小，仍然可以获得好处。
typeText方法需要哪些参数，以及baseObjects到底是什么。 - ShuklaSannidhyatypeText函数的？您传递了哪些参数？ - ShuklaSannidhyabaseObjects是画布上所有对象的数组（用于重绘目的）。typeText()是从 Text 对象调用的。所以我会这样做var text = new Text();然后调用text.typeText(baseObjects, 20);。 - Jamesking56