1

我有一个本质上是星爆效果的图像。星爆的颜色是白色，背景是透明的（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（未测试其他版本）
4

3 回答 3

2

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

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

于 2013-03-11T18:41:55.013 回答
1

Here’s how to easily recolor your starbursts just before rendering on canvas

Convert your starburst.png into a vector path! (I know, you will have to drag out Gimp/Illustrator for this one time—but it’s worth it!)

Starburst paths can have fills and the fills can be solid colors or even gradients—as fancy, random recoloring as you need!

Starburst paths can scale without the pixilation of raster images like .png’s.

Starburst paths can rotate to show diversity in your bursts--and even skew to represent a bit of 3d motion.

If you want to get fancy, you can even create “glowing” bursts by using shadows and blurs.

Starburst paths are faster to render than .png images—especially if you need to manipulate each .png before drawing.

于 2013-03-11T20:05:31.607 回答
1

我很确定您可以使用该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;

}

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

于 2013-03-12T20:33:02.487 回答