如何在HTML5中为图像着色

我想给图像着色，但不是从原点减去颜色，而是添加颜色。使用javascript在HTML5中有没有一种快速的方法可以做到这一点？

是的，有两种简单的方法可以使用

方法1-复合模式 复合模式

打火机

实际上是一种加法模式

您可以用一行代码（）激活它：

下一个绘制的内容将添加到背景中，如果您使用深褐色矩形绘制了一半图像，则会得到此结果

方法2-手动操作缓冲区 另一种方法是通过几步操作缓冲区本身-这基本上与

打火机

模式完全相同，但采用“低级别”方式

当然，作为基础，这为您提供了处理图像数据的多种其他可能性（乘法、减法、求反、日射、卷积等）：

///获取当前内容的像素数据
buffer=ctx.getImageData（0，0，wh，h）；
///添加的颜色
c={r:0，g:127，b:200}；
///循环通过像素阵列（RGBA=4字节）
对于（；i

其结果是：

没那么难！请注意，我们不需要钳制值，因为此数组缓冲区类型将为我们执行此操作（画布使用的数组类型为

uint8clampedaray

）

这是一个

结论 当然，复合模式更（实际）为低级模式，因此其性能优于使用JavaScript迭代缓冲区

但是，对于复合模式不支持的内容，您可以使用第二种方法（例如，它最初有一个变暗模式，但这已从规范中删除。异或模式仅适用于alpha位，而不适用于实际像素等）

此外-如果您不是特别喜欢加法模式，您可以始终在顶部绘制下一个形状，方法是将其颜色的alpha值设置为

0.5

，或者在顶部绘制图像的情况下，使用

globalAlpha

为任何下一个绘制设置alpha值。这将使内容着色，并表现为倍增模式（最后减少）

ctx.globalCompositeOperation = 'lighter';

/// get the pixel data for current content
buffer = ctx.getImageData(0, 0, wh, h);

/// the color for addition
c = {r:0, g: 127, b: 200};

/// loop through pixel array (RGBA = 4 bytes)
for(; i < len; i += 4) {
    data[i]     = data[i]     + c.r;  /// add R
    data[i + 1] = data[i + 1] + c.g;  /// add G
    data[i + 2] = data[i + 2] + c.b;  /// add B
}

/// we're done, put back the new data to canvas
ctx.putImageData(buffer, 0, 0);