替换画布上的颜色

Question

我正在使用html5画布制作游戏。我制作了一个spritefont系统，可以从纹理中绘制文本。即

。

现在，我希望能够将文本的白色部分更改为所需的任何颜色。我的猜测是，我需要将纹理渲染到临时画布上以更改颜色并获取新的纹理并进行绘制。

但是，我不知道如何使用画布的功能替换颜色。

我什至不知道这是否是最好的方法。我该怎么办？

Answer 1

HTML5画布遵循绘制和忘记策略。如果要对先前绘制的内容进行任何更改（字体颜色，形状或文本或线条等更改），则需要重新绘制所有内容。

在很大程度上取决于我对画布的使用，整个重新绘制过程非常快，并且没有任何滞后或延迟。

编辑

context.fillStyle = 'red';
context.strokeStyle = 'black';

context.font = '20pt Verdana';
context.fillText('Some text', 50, 50);
context.strokeText('Some text', 50, 50);

context.fill();
context.stroke();

Answer 2

由于您的精灵字体是单色的，因此可以使用CanvasRenderingContext2D's 'multiply' globalCompositeOperation将颜色应用于白色部分。但是，乘以一个实心的矩形会擦掉透明度，因此您需要使用'destination-atop'重新绘制透明部分。

const FONT_COLOR = '#39f';

// Load up your spritefont
const spritefont = new Image();
spritefont.src = 'https://i.stack.imgur.com/mDvum.png';

// While waiting for the image to load,
// create a canvas to do the coloring work on
const fontCanvas = document.createElement('canvas');
const fontContext = fontCanvas.getContext('2d');

// Once the spritefont is loaded,
spritefont.addEventListener('load', function () {
  // Resize the canvas to match the image's dimensions
  fontCanvas.width = spritefont.width;
  fontCanvas.height = spritefont.height;

  // Draw your image on the canvas with a black background
  // Without the background, you'll get tinting at the partially-transparent edges
  fontContext.fillStyle = 'black';
  fontContext.fillRect(0, 0, fontCanvas.width, fontCanvas.height);
  fontContext.drawImage(spritefont, 0, 0);
  
  // Multiply by the font color
  // white * color = color, black * color = black
  fontContext.globalCompositeOperation = 'multiply';
  fontContext.fillStyle = FONT_COLOR;
  fontContext.fillRect(0, 0, fontCanvas.width, fontCanvas.height);

  // Restore the transparency
  fontContext.globalCompositeOperation = 'destination-atop';
  fontContext.drawImage(spritefont, 0, 0);
});

// Display the canvas in the snippet
document.body.append(fontCanvas);

/* just to prove that alpha is preserved */
canvas {background:0 0/32px 32px linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),16px 16px/32px 32px linear-gradient(45deg,#ccc 25%,#999 25%,#999 75%,#ccc 75%,#ccc);}

如果您打算将变色功能放入功能中并重新使用画布（应该这样做），请确保将上下文的globalCompositeOperation设置为默认值'source-over'。