HTML5 Canvas 重新着色图像 *在*渲染之前

Question

我有一个本质上是星爆效果的图像。星爆的颜色是白色，背景是透明的（PNG w/Alpha）。我在 HTML5 画布上的随机位置随机生成这些星爆，同时生成随机的色相、饱和度和亮度 (HSL) 值。这些可能是 RGB 值，如果这样可以简化事情的话。

目标是在将 PNG 渲染到画布之前，根据随机生成的 HLS 值重新着色 PNG 以在 HTML5 画布上显示。

我在 StackOverflow 和其他网站上阅读了一些其他帖子，但我看到的唯一解决方案是将其渲染到画布上，获取图像显示位置的坐标，并以像素为单位修改颜色-像素基础。理论上这可以工作，但是一些图像可能会略有重叠。此外，如果已经存在背景，那么据我所知，背景的颜色也会被修改，这对我来说也不是什么解决方案。

如果这超出了 Canvases 的能力范围，作为后备，我想我可以使用 GD2 或 Imagick 通过 PHP 动态重新着色图像，或者通过 Gimp、ImageMagick 的命令行或其他一些图片库...

非常感谢！

-- 结果--

特别感谢 @jing3142 对屏幕外画布渲染的初步建议，以及 @Jarrod 提供我缺少的重要部分：globalCompositeOperation = "source-in"

这是该概念的一个工作实现：http://jsfiddle.net/fwtW2/2/

工作于：

• 铬
• 火狐
• IE 9（其他版本未测试）

Answer 1

具有图像大小的第二个画布怎么样，将图像放在该画布上，根据需要重新着色，提取重新着色的图像并随机放置在主画布上，使用重新着色第二个画布上的图像新的 HSL 值，提取并随机放置在主画布上并重复？

这也可能有帮助https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

Answer 2

我很确定您可以使用source-in globalCompositeOperation 操作？无需对矢量图像进行所有的硬核和疯狂。

这段代码是魔法发生的地方：

var color = 'red';
ctx.fillStyle = color;
ctx.globalCompositeOperation = "source-in";

但你需要将它重新绘制到屏幕外的画布上：你可以这样做

createBuffer = function(sizeW, sizeH)
{
    buffer = document.createElement('buffer');
    bufferCtx = buffer.getContext('2d');

    buffer.width = sizeW;
    buffer.height = sizeH;

}

然后只需将您的图像绘制到屏幕外画布并应用全局合成。

Answer 3

以下是在画布上渲染之前轻松重新着色星芒的方法

将您的 starburst.png 转换为矢量路径！ （我知道，这一次您将不得不拖出 Gimp/Illustrator ——但这是值得的！）

Starburst 路径可以有填充，填充可以是纯色甚至是渐变色——根据需要随意重新着色！

Starburst 路径可以缩放，而无需像 .png 那样对光栅图像进行像素化。

Starburst 路径可以旋转以显示您的爆发的多样性 - 甚至可以倾斜以表示一些 3d 运动。

如果你想变得花哨，你甚至可以使用阴影和模糊来创造“发光”的爆发。

Starburst 路径的渲染速度比 .png 图像要快，尤其是当您需要在绘制之前操作每个 .png 时。