在
HTML Canvas中,我可以使用ctx.fillStyle =’red’设置一行文本的颜色,这很棒.我想要做的是能够通过字母设置颜色,只需要画一次字.
因此,如果文本是’Hello different colors！’,有没有办法让字母H变成红色,但文本的其余部分是白色的？
解决方法
我告诉你这个解决方法.基本上你一次输出一个字符,并使用内置的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,y);
x += ctx.measureText(ch).width;
}
}
texter("What's up?",10,30);
我们得到一个输出：
在行动at jFiddle中查看它.我使用了最新的Chrome.