HTML5画布重新着色图像*之前*渲染

时间:2013-03-11 18:05:00

标签: php html5 html5-canvas

我有一个基本上是星爆效果的图像。星爆的颜色是白色,背景是透明的(PNG w / Alpha)。我在随机位置随机生成这些星爆的HTML5画布,同时生成随机的Hue,Saturation和Light(HSL)值。这些可能是RGB值,如果这简化了事情。

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

我已经阅读了StackOverflow和其他网站上的其他帖子,但我见过的唯一解决方案是将其渲染到画布上,抓取图像显示位置的坐标,并修改像素上的颜色。像素基础。从理论上讲,这可能有效,但有些图像可能略有重叠。此外,如果已经存在背景,那么根据我的理解,背景的颜色也会被修改,这对我来说也不是很好的解决方案。

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

非常感谢!

- 结果 -

特别感谢@ jing3142关于屏幕外画布渲染的初步建议,以及@Jarrod提供我缺少的重要文章:globalCompositeOperation = "source-in"

以下是该概念的有效实施:http://jsfiddle.net/fwtW2/2/

适用于:

  • 火狐
  • IE 9(尚未测试其他版本)

3 个答案:

答案 0 :(得分:2)

如果第二个画布具有图像的大小,将图像放在画布上,根据需要重新着色,提取重新着色的图像并随机放置在主画布上,使用第二个画布上的重新着色图像新的HSL值,提取并随机放在主画布上并重复?

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

答案 1 :(得分:1)

以下是在画布上渲染之前如何轻松重新着色星爆

将starburst.png转换为矢量路径! (我知道,你将不得不拖延Gimp / Illustrator这一次 - 但这是值得的!)

Starburst路径可以有填充,填充可以是纯色甚至渐变 - 如您所需的花哨,随机重新着色!

Starburst路径可以在没有像.png的光栅图像像素化的情况下进行缩放。

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

如果你想获得幻想,你甚至可以通过使用阴影和模糊来创造“发光”的爆发。

Starburst路径渲染速度比.png图像更快 - 特别是如果您需要在绘制之前操纵每个.png。

答案 2 :(得分:1)

我很确定你可以使用source-in globalCompositeOperation opertaion吗?无需通过矢量图像获得所有硬核和疯狂。

此代码是魔术发生的地方:

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;

}

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