Question

我对使用canvas标签仍然相对较新。到目前为止我所做的就是在画布上画一幅图像。我的目标是制作一个反复循环的假夜间/日动画。

我已经筋疲力尽了很多不同的途径（SVG，CSS3过滤器等），并认为画布像素操作是我的最佳途径。我想：

遍历图像中的所有像素
选择特定颜色范围
调整为新颜色
更新画布

这是我到目前为止的代码：

function gameLoop(){
        requestAnimationFrame(gameLoop);        

        ////////////////////////////////////////////////////////////////
        // LOOP PIXEL DATA - PIXEL'S RGBA IS STORED IN SEQUENTIAL ARRAYS
        ////////////////////////////////////////////////////////////////
        for(var i=0; i<data.length; i+=4){
            red=data[i+0];
            green=data[i+1];
            blue=data[i+2];
            alpha=data[i+3];

            // GET HUE BY CONVERTING TO HSL
            var hsl=rgbToHsl(red, green, blue);
            var hue=hsl.h*360;

            // CHANGE SET COLORRANGE TO NEW COLORSHIFT
            if(hue>colorRangeStart && hue<colorRangeEnd){
                var newRgb=hslToRgb(hsl.h+colorShift, hsl.s, hsl.l);
                data[i+0]=newRgb.r;
                data[i+1]=newRgb.g;
                data[i+2]=newRgb.b;
                data[i+3]=255;
            };
        };

        // UPDATE CANVAS
        ctx.putImageData(imgData, 0, 0);        
    };

代码工作并选择一个色调范围并将其移动一次，但是非常滞后。画布尺寸大约为500x1024。

我的问题：

是否有可能提高绩效？
有更好的方法来执行定义的色调偏移动画吗？

谢谢！

Answer 1

使用高质量的HSL转换很难实现这一点。在那里完成了，所以我想出了一种量化的方法，允许你实时做到这一点。

您可以在此处找到解决方案（GPL3.0许可）：
https://github.com/epistemex/FastHSL2RGB

使用示例可在此处找到（MIT许可证）incl。演示：
https://github.com/epistemex/HueWheel

在这里引用我自己的解决方案的道歉，但内部工作（如何）在这里以一种简单的形式呈现，并且这些都可以免费用于任何事情......

关键点无论如何：

量化您想要使用的范围（不要使用完整的360度而不是浮点以获得轻盈等）。
缓存3D数组中的值（使用Web worker初始设置或使用粗略值）
量化输入值，使其适合内部3D数组的范围
使用这些值处理位图

这对于动画来说是不准确但足够好（或者是我为其编写的预览）。

还有其他一些技术，例如为关键位置预先缓存完整的已处理位图，然后在这些位置之间插入颜色。当然，这需要更多的内存，但速度很快。

希望这有帮助！

在画布图像上动态设置色调偏移

1 个答案: