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

Question

在HTML Canvas中,我可以使用ctx.fillStyle ='red'设置一行文本的颜色,这很棒.我想要做的是能够通过字母设置颜色,只需要画一次字.

因此,如果文本是'Hello different colors!',有没有办法让字母H变成红色,但文本的其余部分是白色的？

Answer 1

我告诉你这个解决方法.基本上你一次输出一个字符,并使用内置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);

我们得到一个输出:

在jFiddle上查看它.我用过最新的Chrome.

Answer 2

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