1

私はスマートフォン用の Web サイトを設計する初心者のプログラマーであり、ボディの背景画像のカラー バランスをゆっくりと変化させたいと考えています。まるで誰かが Photoshop のカラー バランス コントロール バーをどちらかの方向に特定の割合で微調整しているかのように、色を交互に変えていきます。これは、ページを表示している間、常に発生していますが、気を散らさないように十分な速度です。基本的に、色が変化する背景画像です。

この効果をスマートフォンで実現することは可能ですか? ありがとう！

背景画像へのリンクはこちら:
http://i.imgur.com/T1FMp5L.jpg

私が考えている可能な解決策（私は初心者であることを念頭に置いてください）：さまざまなバランス状態で複数の画像を作成し、ゆっくりとした移行を使用して次から次へとスムーズに移行するか、ループアニメーション画像ファイルを作成して背景として使用します画像。これらのいずれかが私のアプリで機能しますか?

4

1 に答える 1

0

これはCanvasを使用して実行できることがわかりました。私はこれを見つけました:キャンバス - 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 をサポートするスマートフォン/ブラウザーで機能します。

于 2013-04-16T22:11:14.297 に答える