我可以使用HTML5 Canvas中的字符文字顏色嗎？

在HTML Canvas中，我可以使用ctx.fillStyle ='red'來設置一行文本的顏色，這很棒。我想要做的是通過字母設置顏色，只需要畫一次。我可以使用HTML5 Canvas中的字符文字顏色嗎？

所以如果文字是'你好不同的顏色！'，有沒有辦法讓字母H變紅，但其餘的文字是白色的？

2011-10-05 Agent Goon

我向您介紹此解決方法。基本上，您一次輸出一個字符的文本，並使用內置的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);

我們會得到一個輸出： Sample output

檢查它在行動at jFiddle。我使用了最新的Chrome。

來源

2011-10-05 17:52:38 Gleno

謝謝。我希望有一種方法可以在不多次寫入的情況下執行此操作，但是您的解決方案是非常好的選擇，尤其是因爲它不會混淆我的動態文本大小。謝謝。 –

不客氣。歡迎來到stackoverflow！同時你應該標記出你接受*的答案。 ;） – Gleno

啊，完成了。我已經使用此方法的修改版本實現了我想要的內容。有一件事我注意到，在動畫中，如果你要在每一幀畫出每一個字母，它將在Firefox中變得非常滯後（然而IE/Chrome很好）。因爲我想要第一個顏色不同，所以我寫了第一個字符，然後寫了其他字符。 –

ctx.fillStyle作爲狀態機工作。當你說ctx.fillStyle = 'red'時，它會將事物染成紅色。你可以通過設置ctx.fillStyle = 'white'來做你想做的事情，然後寫字母H，然後設置ctx.fillStyle = 'red'，然後寫下句子的其餘部分。

來源

2011-10-05 17:46:17

我可以使用HTML5 Canvas中的字符文字顏色嗎？

回答

相關問題