javascript - 如何在 Canvas 上绘制单色图像，但使用不同的颜色？

Question

我有一张黑白图片。如果有必要，我可以把它变成透明和白色。

如何将此图像绘制到 Canvas 上，用任意颜色替换白色？

我希望能够使用如下所示的不同颜色的字体在 Canvas 上绘制文本。我不想拥有图像的多个副本。

Answer 1

有两种方法可以做到这一点。

离屏

创建一个离屏 Canvas ， 将文本渲染到该 Canvas 上，然后使用 ctx.globalCompositeOperation = "color" (更新我的错误应该是 ctx.globalCompositeOperation = "destination-in") 先绘制颜色，然后在颜色上绘制文本。 (见示例)

上述方法的例子

canvas.width = 430;
canvas.height = 16;
const ctx = canvas.getContext("2d");

// off screen canvas
const text = document.createElement("canvas");
text.width = 512;
text.height = 16;
text.ctx = text.getContext("2d");

const font = new Image;
font.src = "/image/VXaVG.png"
font.addEventListener("load", () => {
    drawColorString("000Black text#F00 Red text#FF0 Yellow#0F0 Green#0FF Cyan#00F Blue#F0F Magenta", 10, 4);
});
const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grad.addColorStop(0,"#FFF");
grad.addColorStop(1,"#000");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);

function drawColorString(str, xpos, ypos) {
    const parts = str.split("#");
    var x = 0;
    for (const part of parts) {
        const color = part.slice(0,3);
        const chars = part.slice(3);
        for (const char of chars) {
            drawChar(char, color, x);
            x += 8;
        }
    }
    colorText();
    ctx.drawImage(text, xpos, ypos);
}
function colorText() {
    text.ctx.globalCompositeOperation = "destination-in";
    text.ctx.drawImage(text, 0, 8, text.width, 8, 0, 0, text.width, 8);
    text.ctx.globalCompositeOperation = "source-over";
}
function drawChar(char, color, xpos) {
    const c = char.charCodeAt(0);
    const x = (c % 32) * 8;
    const y = (c / 32 | 0) * 8;
    
    text.ctx.fillStyle = "#" + color;
    text.ctx.fillRect(xpos, 0, 8, 8);
    text.ctx.drawImage(font, x, y, 8, 8, xpos, 8, 8, 8);
 }

canvas {
    border:1px solid black;

}

<canvas id="canvas"></canvas>

使用的字体图片

添加剂

第二种方法是修改源图像，为您提供蒙版的黑色、红色、绿色、蓝色版本的文本。渲染颜色，绘制黑色文本，然后使用 ctx.globalCompositeOperation = "lighter" 进行叠加以根据需要添加 r、g、b 量。

加法示例

canvas.width = 430;
canvas.height = 16;
const ctx = canvas.getContext("2d");
const font = new Image;
font.src = "/image/FfGjd.png"
font.addEventListener("load", () => {

    drawColorString("000Black text#F00 Red text#FF0 Yellow#0F0 Green#0FF Cyan#00F Blue#F0F Magenta", 10, 4);
});
const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grad.addColorStop(0,"#FFF");
grad.addColorStop(1,"#000");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);

function drawColorString(str, x, y) {
    const parts = str.split("#");
    for (const part of parts) {
        const color = part.slice(0,3);
        const chars = part.slice(3);
        for (const char of chars) {
            drawChar(char, color, x, y);
            x += 8;
        }
    }
}
function drawChar(char, color, xpos, ypos) {
    const addLayer = (channel, amount) => {
        if (amount) {
            ctx.globalAlpha = amount;
            ctx.drawImage(font, x, y + 64 * (channel + 1), 8, 8, xpos, ypos, 8, 8);
        }
    }
    const red   = parseInt(color[0] + color[0], 16) / 255; 
    const green = parseInt(color[1] + color[1], 16) / 255; 
    const blue  = parseInt(color[2] + color[2], 16) / 255; 
    const c = char.charCodeAt(0);
    const x = (c % 32) * 8;
    const y = (c / 32 | 0) * 8;
    ctx.globalAlpha = 1;
    ctx.drawImage(font, x, y, 8, 8, xpos, ypos, 8, 8);

    ctx.globalCompositeOperation = "lighter"; 
    addLayer(0, red);
    addLayer(1, green);
    addLayer(2, blue);
    
    ctx.globalCompositeOperation = "source-over"; // default
    ctx.globalAlpha = 1;
 }

canvas {
    border:1px solid black;

}

<canvas id="canvas"></canvas>

上面代码段中使用的图像示例。

或者您可以结合这两种方法并使用附加方法将彩色文本渲染到屏幕外 Canvas ，然后将该 Canvas 绘制到显示 Canvas 。这意味着您只需要在文本发生变化时绘制文本，而不是动画的每一帧。