en toile HTML, je peux définir la couleur d'une ligne de texte en utilisant ctx.fillstyle = "rouge", ce qui est génial. Ce que j'essaie de faire est de définir la couleur par lettre, avec seulement avoir à dessiner le mot une fois.
Donc, si le texte est "bonjour différentes couleurs!", est-ce que je peux faire la lettre H rouge, mais le reste du texte blanc?
3 Réponses :
ctx.fillstyle fonctionne comme une machine d'état. Lorsque vous dites ctx.fillstyle = 'rouge' , il colorera les choses comme rouge. Vous pouvez faire ce que vous voulez en définissant ctx.fillstyle = 'blanc' , puis écrivez la lettre H, puis réglage ctx.fillstyle = 'rouge' , puis écrivez le reste de la phrase.
Je vous présente cette solution de contournement. Fondamentalement, vous produisez votre texte un caractère à la fois et utilisez la fonction intégrée Supposons que nous ayons HTML comme: p> et javascript comme: p> mesteutext () code> pour déterminer la largeur de chaque lettre af-à-propos qu'elle a été dessinée. Ensuite, nous avons compensé la position où nous voulions tirer le même montant. Vous pouvez modifier cet extrait pour produire l'effet que vous souhaitez. 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);
Merci. J'espérais qu'il y avait un moyen de le faire sans écrire plus d'une fois, mais votre solution est une très bonne alternative, d'autant plus que cela ne gâchera pas mon dimensionnement de texte dynamique. Merci.
Je vous en prie. Et bienvenue à Stackoverflow! Pendant ce temps, vous devriez marquer les réponses qui frappent votre fantaisie comme acceptée . ;)
Ahh, fait. J'ai mis en œuvre ce que je voulais utiliser une version modifiée de cette méthode. Une chose que j'ai remarquée, c'est que dans une animation si vous allez dessiner chaque lettre, il sera extrêmement décalé dans Firefox (c.-à-d. Chrome allait toutefois bien). Depuis que je voulais la première couleur différente, j'ai écrit le premier caractère, puis le reste.
J'étais dans un bateau similaire mais j'essayais de faire plusieurs tailles, est-ce possible?
Si vous ne voulez pas utiliser une fonction "ronde à points".
Vous pouvez utiliser des gradients par ex. CreatelinearGradient. J'ai compris comment bloquer les couleurs, il n'y avait donc pas de gradient seulement deux blocs de couleur. C'est ce que j'ai fait: Ce code permet au texte de ressembler à Ceci et permet également de multiples couleurs de texte sur une ligne de texte. Découvrez cet exemple: Exemple W3School . J'espère que cela aide.
Approche intéressante - J'ai joué avec cela et j'ai créé une Jsfiddle pour calculer automatiquement le addColorstop incréments: Jsfiddle .NET / YASUOM8G
