我可以通过HTML5 Canvas中的字符文本颜色来做吗？

在 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.