我告訴你這個解決方法.基本上你一次輸出一個字符,并使用內置的measureText()函數(shù)來確定每個字母的寬度.然后我們將我們想要繪制的位置偏移相同的數(shù)量.您可以修改此代碼段,以產(chǎn)生所需的效果.

假設我們有這樣的HTML：

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

總結

以上是生活随笔為你收集整理的html5 canvas文字颜色,我可以通过HTML5 Canvas中的字符文本颜色来做吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。