Javascript 基于画布中的字符串动态更改文本

我不确定这是否可行，一般来说我对canvas还比较陌生，但我的目标是读取一个字符串，如果字符串包含一个特定的单词，那么在保持字符串其余部分正常的情况下更改该特定单词的特定颜色。例如，is text==性能降级将该文本更改为紫色，但保留其余文本正常。但如果text==性能降级且可操作，则将性能降级更改为

紫色

，操作更改为

绿色

    // == Color Rules ==
    // Partial Outage = Orange
    // Major Outage = Red
    // Degraded Performance = Purple
    // Under Maintenance = Grey
    // Operational = Green

    function degraded() {
        ctx.fillStyle = "Purple";
        ctx.fill();
        ctx.fillText("Partial Outage", 75, 50);
    }
    function operational() {
        ctx.fillStyle = "Green";
        ctx.fill();
        ctx.fillText("Operational", 75, 50);
    }


    // JSON
    result = {"PF":"operational","PU":"degraded-performance","EA":"operational"}                

    const json = JSON.stringify(result, null, 1);
    const removeBracket = json.replace(/{/g, '').replace(/}/g, '');
    const unquoted = removeBracket.replace(/\"/g, "");  

            // load bg
            ctx = canvas.getContext("2d");
            img = document.getElementById("bg");
            ctx.drawImage(img, 0, 0);

            // Add to String and Split Lines
            var x = 10;
            var y = 50;
            var lineheight = 30;
            splitlines = ("PF" + ' ' + result.PF.replace(new RegExp(' ', 'g'), '\n') +
            "\n" + "PU" + ' ' + result.PU + "\n" + "EA" + ' ' + result.EA)

            // Split Lines
            var lines = splitlines.split('\n');
            for (var i = 0; i<lines.length; i++){
            ctx.fillText(lines[i], x, y + (i*lineheight) );
            }

            // If string contains a text swap out THAT specific text. How can i do that?
            if (lines.includes('Operational') == true) {
                operational();
            } else {

            }

/==颜色规则==
//部分断电=橙色
//大停电=红色
//性能下降=紫色
//维修中=灰色
//操作=绿色
功能降级（）{
ctx.fillStyle=“紫色”；
ctx.fill（）；
ctx.fillText（“部分大修”，75,50）；
}
功能操作（）{
ctx.fillStyle=“绿色”；
ctx.fill（）；
ctx.fillText（“操作”，75,50）；
}
//JSON
结果={“PF”：“可操作”，“PU”：“性能降级”，“EA”：“可操作”}
const json=json.stringify（结果，null，1）；
constRemoveBracket=json.replace（/{/g'，）.replace（/}/g'，）；
const unquoted=removeStricket.replace（/\“/g，”）；
//加载背景
ctx=canvas.getContext（“2d”）；
img=document.getElementById（“bg”）；
ctx.drawImage（img，0,0）；
//添加到字符串和拆分行
var x=10；
变量y=50；
var线宽=30；
splitlines=（“PF”+“”+result.PF.replace（新的RegExp（“”，'g'），'\n'））+
“\n”+“PU”+“”+result.PU+”\n”+“EA”+“”+result.EA）
//分割线
变量行=拆分行。拆分（'\n'）；
对于（var i=0；i，我会这样做：

您需要在循环中使用if语句设置正确的颜色


json={
“PF”：“可操作”，
“PU”：“性能降级”，
“EA”：“部分大修”
}
canvas=document.getElementById（“c”）
ctx=canvas.getContext（“2d”）；
var x=10；
变量y=10；
for（json中的var prop）{
if（json[prop].includes（“性能降级”））{
ctx.fillStyle=“紫色”；
}else if（json[prop].includes（“部分中断”））{
ctx.fillStyle=“橙色”；
}否则{
ctx.fillStyle=“绿色”；
}
fillText（prop+''+json[prop]，x，y）；
y+=20
}
我不认为有任何方法可以在一个
fillText（）
中应用多种样式，您可能必须找到一种方法来正确定位第二批文本。（如果您准备使用单空格字体，这将变得容易得多）@DBS如果我把字符串分割成单独的块，然后用filltext这样做会怎么样？当然，这应该是可行的，但困难在于正确定位这些块。@askmeaquestion1234我做了更多的清理，你儿子的解析有点奇怪…不确定你想在那里做什么，只是一个常规的
（json中的var prop）{
应该可以