Question

我是一名初学程序员，为智能手机设计一个网站，我有一个身体的背景图像，我想慢慢改变颜色平衡，交替颜色，好像有人在调整Photoshop颜色平衡控制条一定百分比无论方向。当您查看页面时，这种情况会不断发生，但速度要慢到不要太分散注意力。基本上，一个变色的背景图像。

是否可以在智能手机上实现此效果以及如何实现？谢谢！

是一个指向bg图像的链接：
http://i.imgur.com/T1FMp5L.jpg

我正在考虑的可能的解决方案（请记住我是一个新手）：在不同的平衡状态下创建多个图像并使用慢速过渡从一个平滑地转换到下一个，或者创建一个循环的动画图像文件并使用它作为bg图像。这些东西中的任何一个都可以在我的应用程序中运行吗？

Answer 1

我发现这可以使用Canvas完成。我发现了这个：Canvas - Change colors of an image using HTML5/CSS/JS?

第一条评论详细描述了它并提供了这个jsfiddle示例：http://jsfiddle.net/pHwmL/1/

function tintImage(imgElement,tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var map = ctx.getImageData(0,0,320,240);
    var imdata = map.data;

    // convert image to grayscale
    var r,g,b,avg;
    for(var p = 0, len = imdata.length; p < len; p+=4) {
        r = imdata[p]
        g = imdata[p+1];
        b = imdata[p+2];
        // alpha channel (p+3) is ignored           

        avg = Math.floor((r+g+b)/3);

        imdata[p] = imdata[p+1] = imdata[p+2] = avg;
    }

    ctx.putImageData(map,0,0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle=tintColor;
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // replace image source with canvas data

这适用于支持HTML5的智能手机/浏览器。

移动网站上的变色（balence）背景图片

1 个答案: