Posso fare per colore del testo dei caratteri in HTML5 Canvas?

Question

In HTML Canvas posso impostare il colore di una riga di testo usando ctx.fillStyle = 'red', che è ottimo. Quello che sto cercando di fare è in grado di impostare il colore per lettera, con solo dover disegnare la parola una volta.

Quindi se il testo è "Ciao colori diversi!", C'è un modo per rendere la lettera H rossa, ma il resto del testo è bianco?

Answer 1

Vi presento questa soluzione alternativa. In pratica, il testo viene stampato un carattere alla volta e viene utilizzata la funzione incorporata measureText() per determinare la larghezza di ogni lettera man mano che veniva disegnata. Quindi abbiamo compensato la posizione in cui volevamo disegnare di quella stessa quantità. Puoi modificare questo frammento per produrre l'effetto desiderato.

Supponiamo di avere HTML in questo modo:

<canvas id="canvas" width="300" height="300"/> 

e Javascript in questo modo:

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); 

Ci piacerebbe ottenere un output:

Check it out in azione at jFiddle. Ho usato l'ultimo Chrome.

Answer 2

ctx.fillStyle funziona come macchina di stato. Quando dici ctx.fillStyle = 'red', colorerà le cose come rosso. Puoi fare ciò che vuoi impostando ctx.fillStyle = 'white', quindi scrivendo la lettera H, quindi impostando ctx.fillStyle = 'red', quindi scrivendo il resto della frase.