我有一个基本上是星爆效果的图像。星爆的颜色是白色,背景是透明的(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/
适用于:
答案 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;
}
然后只需将图像绘制到屏幕外画布并应用全局合成。