在 canvas 上更改图像 color/hue 的最佳方法是什么？

Question

我尝试通过谷歌搜索寻找答案，但一直找不到简单的答案，也找不到答案有效的原因。所以我想知道，用于更改 canvas 上图像颜色的代码是什么？例如，假设我想将内容更改为 #ff0000。如果一个像素是 #000000，它应该保持这种状态。如果一个像素我们#ffffff，它应该变成#ff0000。这是我的文本对象构造函数：

Text = function(x, y, str, s, c){
        var img = new Image();
        img.src = "font.png";
        var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", ".", "!", "?"]
        this.text = str.toLowerCase();
        this.x = x;
        this.y = y;
        this.type = "text";
        this.rows = 1;
        this.height = this.rows * 10;
        this.width = this.text.length * 8;
        this.draw = function(){
            for (var i = 0; i < this.text.length; i++)
            {
                scene.ctx.drawImage(img, (alphabet.indexOf(this.text[i]) % 16) * 8, Library.newMath.roundZero(alphabet.indexOf(this.text[i]) / 16) * 10, 8, 10, this.x + i * 8 + (scene.xOffset * !this.fixed), this.y + 0 + (scene.yOffset * !this.fixed), 8, 10);
            }           
        }
        Shape.prototype.constructor.call(this, x, y);
    }

Answer 1

markE 给了你实现你想要的东西的全部关键但这里它适用于你的情况：

您声明您的图像仅包含一种纯色，即白色。
^{（这里我会认为透明没有颜色，但在其他情况下它是）}
要更改此颜色，您可以使用 ctx.globalCompositeOperation('source-atop') 参数，它将绘制新的形状 "only where it overlaps the existing canvas content." 这意味着您可以先绘制字母形状，然后在其上填充一个矩形，并且只填充彩色字母形状将被绘制。

var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.fillStyle = 'red';
  ctx.drawImage(this, 0, 0);
  ctx.globalCompositeOperation = 'source-atop';
  ctx.fillRect(0, 0, canvas.width, canvas.height)
    // reset to default
  ctx.globalCompositeOperation = 'source-over';
}
img.src = "http://i.stack.imgur.com/9RQXh.png";

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

或者你可以用另一种方式来做：先画彩色矩形，将 globalCompositeOperation 设置为 "destination-atop" 然后画你的字母。

var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.globalCompositeOperation = 'destination-atop';
  ctx.drawImage(this, 0, 0);
  // reset to default
  ctx.globalCompositeOperation = 'source-over';
}
img.src = "http://i.stack.imgur.com/9RQXh.png";

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

现在，要在您的代码中实现它，您可以保存 Text 对象中设置的彩色字母并绘制它而不是原始图像：

Text = function(x, y, str, s, c){
    var img = new Image();
    // save a pointer to our object so we can use it in the onload event
    var that = this;
    // here implement the coloring part
    img.onload = function(){
      that.img = document.createElement('canvas');
      that.img.width = this.width;
      that.img.height = this.height;
      var ctx = that.img.getContext('2d');
      // set the color to the wanted one
      ctx.fillStyle = c;
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.globalCompositeOperation = 'destination-atop';
      ctx.drawImage(this, 0, 0);
      }
    img.src = "font.png";
    var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", ".", "!", "?"]
    this.text = str.toLowerCase();
    this.x = x;
    this.y = y;
    this.type = "text";
    this.rows = 1;
    this.height = this.rows * 10;
    this.width = this.text.length * 8;
    this.draw = function(){
        for (var i = 0; i < this.text.length; i++)
        {
            // here use the canvas we created
            scene.ctx.drawImage(this.img, (alphabet.indexOf(this.text[i]) % 16) * 8, Library.newMath.roundZero(alphabet.indexOf(this.text[i]) / 16) * 10, 8, 10, this.x + i * 8 + (scene.xOffset * !this.fixed), this.y + 0 + (scene.yOffset * !this.fixed), 8, 10);
        }           
    }
    Shape.prototype.constructor.call(this, x, y);
}

在 canvas 上更改图像 color/hue 的最佳方法是什么？

What is the best way to change the color/hue of an image on canvas?

javascript

canvas

colors

hue

tint