2

取り組んでいる実験に問題があります。

私の計画は、美しく輝く星の背景をページ全体に配置することです。その素晴らしいチュートリアル ( http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/ ) を使用して、完璧な背景を取得することができました。静的キャンバスを使用して静的な星を表示し、アニメーション キャンバスを使用して輝くものを表示します。

実際には、非常にメモリを消費しています。chrome と Opera では非常にスムーズに動作しますが、firefox IE やタブレットでは、各フレームをレンダリングするのに 1 秒もかかりませんでした... HEIGHT が巨大なページではさらに悪化します。

だから私はいくつかの最適化に入りました：

- バッファ キャンバスを使用すると、フレームごとに 1500 回呼び出される createRadialGradient が問題でした

- 大きなバッファ キャンバスと、星ごとに 1 つのキャンバスを使用し、init で createRadialGradient を呼び出すだけです。

-そのバッファキャンバスを削除し、すべての星のキャンバスをメインのキャンバスに描画します

最後の最適化は私が達成できる最高のものだったので、現在のコードを表示するフィドルを書きました。

   //Buffering the star image
    this.scanvas = document.createElement('canvas');
    this.scanvas.width=2*this.r;
    this.scanvas.height=2*this.r;
    this.scon=this.scanvas.getContext('2d');
    g = this.scon.createRadialGradient(this.r,this.r,0,this.r,this.r,this.r);
    g.addColorStop(0.0, 'rgba(255,255,255,0.9)');
    g.addColorStop(this.stop, 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.stop+')');
    g.addColorStop(1.0, 'rgba('+this.color.r+','+this.color.g+','+this.color.b+',0)');
    this.scon.fillStyle = g;
    this.scon.fillRect(0,0,2*this.r,2*this.r);

それが私があなたを必要とするポイントです：

- ユーザーのパフォーマンスに応じて輝く星の数を調整する方法

-最適化のヒント

私を助けてくれるすべての人に前もって感謝します。私が文法ミスを犯した場合は申し訳ありません。私の英語は完璧ではありません。

編集 フィードバックをお寄せいただきありがとうございます。プロセス全体を説明させてください。すべての星には独自のグラデーションとサイズがあります。そのため、個人用キャンバスに保存しました。輝く効果は、drawImage を使用してメインのキャンバスをスケーリングすることによってのみ行われます。

バッファ キャンバスに 50 個または 100 個の異なる星を事前にレンダリングしてから、ランダムな星を選んで描画するのが最善だと思いませんか?

EDIT2

ウォーロックの偉大なアドバイスに従って更新されたフィドル、現在のサイズに合わせてスケーリングされた 1 つの事前レンダリングされた星。星はきれいではありませんが、全体がよりスムーズに動作します。

EDIT3

スプライト シートを使用するようにフィドルを更新しました。素敵！！！！

 //generate the star strip
    var len=(ttlm/rint)|0;
    scanvas = document.createElement('canvas');
    scanvas.width=len*2*r;
    scanvas.height=2*r;
    scon=scanvas.getContext('2d');
    for(var i=0;i<len;i++){
        var newo = (i/len);
        var cr = r*newo;
        g = scon.createRadialGradient(2*r*i+r,r,0,2*r*i+r,r,(cr <= 2 ? 2 : cr));
        g.addColorStop(0.0, 'rgba(200,220,255,'+newo+')');
        g.addColorStop(0.2, 'rgba(200,220,255,'+(newo*.7)+')');
        g.addColorStop(0.4, 'rgba(150,170,205,'+(newo*.2)+')');
        g.addColorStop(0.7, 'rgba(150,170,205,0)');
        scon.fillStyle = g;
        scon.fillRect(2*r*i,0,2*r,2*r);         
    }

編集4（最終）

ダイナミックな星の作品

function draw() {
    frameTime.push(Date.now());    
    con.clearRect(0,0,WIDTH,HEIGHT);
    for(var i = 0, len = pxs.length; i < len; i++) {
        pxs[i].fade();
        pxs[i].draw();
    }   
    requestAnimationFrame(draw);
    if(allowMore === true && frameTime.length == monitoredFrame)
    {
        if(getAvgTime()<threshold && pxs.length<totalStars ) 
        {
            addStars();         
        }
        else
        {
            allowMore=false;
            static=true;
            fillpxs(totalStars-pxs.length,pxss);
            drawstatic();
            static=false;
        }
    }
}

これは、スプライトシート、動的な星の作成、およびいくつかの最適化を備えた、更新された最終的なフィドルです。他に何か見たら、ためらわずに更新する必要があります。

編集後 流れ星を再度有効にする/オブジェクトのプロトタイプを作成する/Jquery を削除する

http://jsfiddle.net/macintox/K8YTu/32/

私を助けてくれたすべての人に感謝します。それは本当に親切で有益でした。

Aesdotjs。PS: とても嬉しいです。テスト後、そのスクリプトは IE9 を含むすべてのブラウザーでスムーズに実行されます。やった!!

4

3 に答える 3

2

放射状の輝きのさまざまな段階で星のスプライトシートを作成するだけではどうですか。

canvas を使用して最初にスプライトシートを作成することもできます。

次に context.drawImage(spritesheet,spriteX,spriteY,starWidth,starHeight) を使用して星を表示します。

スプライト シートの画像は、オーバーヘッドがほとんどなく、非常に高速に画面に描画できます。

スプライトシートを個々の星の画像に分割することで、さらに最適化できます。

あなたのプロジェクトで頑張ってください:)

于 2013-09-06T17:31:15.927 に答える
1

1. DOM に関連する操作を最小限に抑えます。

LINE 93 では、キャンバスを作成しています。

this.scanvas = document.createElement('canvas');

これの代わりに、必要なキャンバスは 1 つだけです。キャンバスの作成を初期化ステップに移動します。

2.キャンバスに整数座標を使用します。

3. オブジェクト プールの設計パターンを使用して、パフォーマンスを向上させます。

4. for ループでは、長さ変数をキャッシュします。

for(var i = 0; i < pxs.length; i++) {...
}

より良い：

for(var i = 0, len = pxs.length; i < len; i++) {
...
}

注: jquery とネイティブ js を混在させないでください。

于 2013-09-06T17:25:52.730 に答える