我可以使用HTML5 Canvas中的字符文字颜色吗？

在HTML Canvas中，我可以使用ctx.fillStyle ='red'来设置一行文本的颜色，这很棒。我想要做的是通过字母设置颜色，只需要画一次。我可以使用HTML5 Canvas中的字符文字颜色吗？

所以如果文字是'你好不同的颜色！'，有没有办法让字母H变红，但其余的文字是白色的？

2011-10-05 Agent Goon

我向您介绍此解决方法。基本上，您一次输出一个字符的文本，并使用内置的measureText()函数来确定每个字母的宽度，如果它是绘制的。然后我们用相同的数量抵消我们想要画的位置。你可以修改这个片段，以产生你想要的效果。

假设我们有HTML像这样：

<canvas id="canvas" width="300" height="300"/>

和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);

我们会得到一个输出： Sample output

检查它在行动at jFiddle。我使用了最新的Chrome。

来源

2011-10-05 17:52:38 Gleno

谢谢。我希望有一种方法可以在不多次写入的情况下执行此操作，但是您的解决方案是非常好的选择，尤其是因为它不会混淆我的动态文本大小。谢谢。 –

不客气。欢迎来到stackoverflow！同时你应该标记出你接受*的答案。 ;） – Gleno

啊，完成了。我已经使用此方法的修改版本实现了我想要的内容。有一件事我注意到，在动画中，如果你要在每一帧画出每一个字母，它将在Firefox中变得非常滞后（然而IE/Chrome很好）。因为我想要第一个颜色不同，所以我写了第一个字符，然后写了其他字符。 –

ctx.fillStyle作为状态机工作。当你说ctx.fillStyle = 'red'时，它会将事物染成红色。你可以通过设置ctx.fillStyle = 'white'来做你想做的事情，然后写字母H，然后设置ctx.fillStyle = 'red'，然后写下句子的其余部分。

来源

2011-10-05 17:46:17

我可以使用HTML5 Canvas中的字符文字颜色吗？

回答

相关问题