6

Photoshop で作成したこの画像があり、JavaScript が同じ画像 (または類似の画像) を作成するように、HTML5 Canvas を使用して再作成する方法が必要です。もダウンロードされます。

かなりシンプルなイメージです。3 つの異なる色がぼやけたり、グラデーションとして配置されたり (方法がわかりません)、下から白のグラデーションがフェードアウトして 60px 後に透明になります。canvas 要素を使って素晴らしいことが可能になるのを見てきましたが、これは毎回同じ画像で、アニメーションはありません。また、ウィンドウのサイズ変更時に自動的にスケーリングしたいと思います。

このようなものを作成する方法を知っている人はいますか？

ここに画像の説明を入力

4

2 に答える 2

2

古い学校の方法でそれを試すこともできます:-)

アルゴリズムを使用して色の配列を生成する

ピンクのグラデーションの例:

var colors = [];

for(var x=0;x<width;x++)
    for(var y=0;y<height;y++)
    {   var red = 0x6b+(x>>2)+(y>>2); if(red>0xff) red = 0xff;
        colors[y*width+x] = (red<<16)|(0x2b<<8)|0xc6;
    }

いくつかのコードを使用して各色 r、g、b を抽出し、キャンバスを塗りつぶします

while(i < size){
    color = colors[i]; // get color

    // extract r,g,b ...
    var r = (color>>16)&255;
    var g = (color>>8)&255;
    var b = color&255;

    // fill buffer with each color part
    buffer[n++] = r;
    buffer[n++] = g;
    buffer[n++] = b;
    buffer[n++] = 255; // alpha to max
    i++;
}

フィドル: http://jsfiddle.net/r043v/FTuPC/9/

于 2013-03-31T14:20:00.667 に答える