我告诉你这个解决方法.基本上你一次输出一个字符,并使用内置的measureText()函数来确定每个字母的宽度.然后我们将我们想要绘制的位置偏移相同的数量.您可以修改此代码段,以产生所需的效果.

假设我们有这样的HTML：

和Javascript一样：

var canvas = document.getElementById("canvas");

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

function randomColor(){

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

return "rgb("+ r + "," + g + "," + b +")";

}

function texter(str, x, y){

for(var i = 0; i <= str.length; ++i){

var ch = str.charAt(i);

ctx.fillStyle = randomColor();

ctx.fillText(ch, x, y);

x += ctx.measureText(ch).width;

}

}

texter("What's up?", 10, 30);

我们得到一个输出：

在行动at jFiddle中查看它.我使用了最新的Chrome.