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

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。

Answer 2

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

Answer 3

如果你不想使用＆＃34; round about way＆＃34;功能。

您可以使用渐变，例如createLinearGradient。我想出了如何硬阻挡颜色，所以没有渐变只有两个颜色块。这就是我所做的：

@Echo Off
Set "dirSrc=C:\App\Folder1"
Set "dirDst=C:\App\Folder2"
Set "extSrc=*.txt"
If Exist "%dirSrc%\%extSrc%" (CD /D "%dirSrc%" 2>Nul || Exit /B
) Else Exit /B
If Not Exist "%dirDst%\" (MD "%dirDst%" 2>Nul || Exit /B)
For /F "Skip=1 Delims=" %%A In ('Dir /B/A-D-H-L-S/O-D/TW "%extSrc%"'
) Do Move /Y "%%A" "%dirDst%">Nul 2>&1

此代码允许文本看起来像this，并且还允许在一行文本上使用多种颜色的文本。看看这个例子：w3school example。希望这会有所帮助。