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

Question

我有一个本质上是星爆效应的图像。星爆的颜色是白色的，背景是透明的（PNG w/Alpha）。我随机在随机位置上的HTML5画布上生成这些星号，并同时生成随机色调，饱和度和光照（HSL）值。这些可能是RGB值，如果这简化了事情。

目标是根据随机生成的HLS值将其呈现在HTML5画布上以重新着色PNG，然后将其呈现到画布上。

我已经阅读了StackOverflow和其他站点上的一些其他帖子，但我看到的唯一解决方案涉及将其呈现在画布上，抓取图像显示位置的坐标，并修改像素上的颜色 - 逐像素基础。理论上这可以起作用，但是某些图像可能略有重叠。另外，如果背景已经存在，那么根据我的理解，背景的颜色也会被修改，这对我来说也不是什么解决方案。

如果这超出了Canvases能够实现的范畴，那么我想我可以通过使用GD2或Imagick通过PHP动态重新着色图像或通过Gimp命令行对图像进行重新着色， ImageMagick或其他一些图像库...

非常感谢！

- 观察 -

特别感谢@ jing3142闭屏画布渲染的初步建议，并@Jarrod提供重要的一块，我失踪：globalCompositeOperation = "source-in"

这里是一个工作的执行理念：http://jsfiddle.net/fwtW2/2/

作品中：

• ç hrome
• 火狐
• IE 9（没有测试其它版本）

Answer 1

我敢肯定，您可以使用source-inglobalCompositeOperation 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; 

}

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

Answer 2

如何具有图像的尺寸，将图像上的画布，重新颜色所需的第二帆布，提取重新着色的图像并随机放置在主画布上，使用新的HSL值在第二个画布上重新着色图像，提取并随机放置在主画布上并重复？

这可能有助于以及https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

Answer 3

下面介绍如何轻松地只是呈现在画布上

将您starburst.png成矢量路径之前重新着色的星爆！ （我知道，你将不得不一次拖出Gimp/Illustrator - 但它是值得的！）

Starburst路径可以有填充和填充可以是纯色或甚至渐变 - 如花哨，随机recoloring作为你需要！

Starburst路径可以缩放而不会像png那样的光栅图像的像素化。

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

如果你想要看起来，你甚至可以通过使用阴影和模糊来创建“发光”爆发。

Starburst路径比.png图片渲染速度更快 - 尤其是如果您需要在绘制之前操作每个.png。