Могу ли я сделать символьный цвет текста в 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);

Мы получили бы вывод:

Проверьте это в действии в jFiddle . Я использовал последний Chrome.

Answer 2

Если вы не хотите использовать функцию «обхода».

Вы можете использовать градиенты, например, createLinearGradient.Я понял, как жестко блокировать цвета, чтобы не было градиента, только два блока цвета.Вот что я сделал:

var gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "red");
gradient.addColorStop(0.5, "blue");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;

Этот код позволяет тексту выглядеть как this , а также позволяет использовать несколько цветов текста в одной строке текста.Посмотрите на этот пример: пример w3school .Надеюсь, это поможет.

Answer 3

ctx.fillStyle работает как конечный автомат. Когда вы говорите ctx.fillStyle = 'red', он будет окрашивать вещи в красный цвет. Вы можете сделать то, что вы хотите, установив ctx.fillStyle = 'white', затем написав букву H, затем установив ctx.fillStyle = 'red', а затем написав остальную часть предложения.