html - 我可以在 HTML5 Canvas 中使用字 rune 本颜色吗？

Question

在 HTML Canvas 中，我可以使用 ctx.fillStyle = 'red' 设置一行文本的颜色，这很棒。我想做的是能够按字母设置颜色，而只需绘制一次单词。

那么如果文本是“你好，不同的颜色!”，有没有办法让字母 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);

我们会得到一个输出:

实际查看 at jFiddle .我使用的是最新的 Chrome。