HTML5 Canvas：为图像着色

Question

我想更改图像/画布的颜色。我现有的代码：

var loader = new PxLoader()
var image = loader.addImage('images/balloon.png')
loader.addCompletionListener(functio() {
  var canvas = $("<canvas>").attr("width", "200").attr("height", "200");
  var context = canvas[0].getContext('2d');
  context.clearRect(0, 0, 200, 200);
  context.drawImage(image, 0, 0);
  // colorize??????
});

我怎样才能给它着色 - 进一步操纵上下文（如果可能的话，我想使用 Pixastic.process）？

Answer 1

如果着色是指改变背景颜色，那么使用......

context.fillColor = '#f0f';

context.fillRect(0, 0, canvas.attr('width'), canvas.attr('height'));

如果您想给颜色上色，请尝试...

var data = ctx.getImageData(0, 0, canvas.attr('width'), canvas.attr('height'));

for (var i = 0, length = data.data.length; i < length; i += 4) {
    data.data[i] = Math.max(255, data.data[i]);
}

context.putImageData(data, 0, 0);

js小提琴。

这将使每个像素的红色值最大化。尝试一下以获得您想要的效果。