2

3つの画像が描かれたフルスクリーンのキャンバスがあります。ウィンドウのサイズを変更すると、これらの画像の位置が変わります。ただし、Firefoxではさらに問題が発生するようです。

ダブルバッファリングでこの問題が解決するはずだと読んでいますが、次の位置が不明な場合にダブルバッファリングを行うにはどうすればよいのでしょうか。つまり、将来何をバッファリングする必要があるかを判断できないので、これはどのように可能でしょうか？

これは実行可能と思われる情報源の1つですが、Fedorが説明しようとしている概念を完全には理解していません。

HTML5 / Canvasはダブルバッファリングをサポートしていますか？

これまでのところ、

    $canvas = $('#myclouds')[0];
    $canvas_buffer = $('canvas')[0].insertAfter($canvas).css('visibility', 'hidden');
    context = $canvas.getContext('2d');
    context_buffer = $canvas_buffer.getContext('2d');
    clouds_arr = [$canvas, $canvas_buffer];

$(window).resize(function () {
    drawCanvas();
};

function initCanvas() {

    // Sources for cloud images
    var cloud1 = '/js/application/home/images/cloud1.png',
        cloud2 = '/js/application/home/images/cloud2.png',
        cloud3 = '/js/application/home/images/cloud3.png';

    // add clouds to be drawn
    // parameters are as follows:
    // image source, x, y, ratio, adjustment)
    addCloud(cloud1, null, 125, .03);
    addCloud(cloud2, null, 75, .15);
    addCloud(cloud3, null, 50, .55);
    addCloud(cloud1, null, 125, .97, 300);
    addCloud(cloud2, null, 70, .85, 300);
    addCloud(cloud3, null, 45, .5, 300);

    // Draw the canvas
    drawCanvas();
}

function drawCanvas() {
    // Reset
    $canvas.attr('height', $window.height()).attr('width', $window.width());

    // draw the clouds
    var l = clouds.length;
    for (var i = 0; i < l; i++) {
        clouds[i].x = ($window.width() * clouds[i].ratio) - clouds[i].offset;
        drawimage(context, clouds[i]);
    }
}

function Cloud() {
    this.x = 0;
    this.y = 0;
}

function addCloud(path, x, y, ratio, offset) {
    var c = new Cloud;
    c.x = x;
    c.y = y;
    c.path = path;
    c.ratio = ratio || 0;
    c.offset = offset || 0;
    clouds.push(c);
}

function drawimage(ctx, image) {
    var clouds_obj = new Image();
    clouds_obj.src = image.path;

    clouds_obj.onload = function() {
        ctx.drawImage(clouds_obj, image.x, image.y);
    };
}
4

1 に答える 1

8

ダブルバッファリングとは何かを誤解している可能性があります。ディスプレイ上でグラフィックスをリアルタイムでスムーズにレンダリングするための技術です。

コンセプトは、2 つのバッファーがあることです。一度に表示できるのは 1 つだけです。フレームを構成する要素を描画するときは、それらを非表示のバッファーに描画します。あなたの場合は雲です。次に、バッファーを反転して、非表示のバッファーを表示し、表示されているバッファーを非表示にします。次に、次のフレームで、新しく非表示になったバッファーに描画します。次に、描画の最後に裏返します。

これにより、フレームが完了する前に要素の部分的なレンダリングがユーザーに表示されなくなります。ゲームシステムでは、これはディスプレイの垂直リフレッシュと同期して非常にスムーズになり、テアリングなどのアーティファクトの発生を防ぎます.

上記のコードを見ると、2 つのキャンバス要素が作成されているように見えますが、最初の Context オブジェクトしか使用していません。反転が行われていないため、これは不完全であると思います。

また、ドラッグ中にウィンドウのサイズ変更イベントが継続的に発生する可能性があることにも注意してください。通常、サイズ変更イベントでタイマーを作成して、実際に再レンダリングします。この方法では、ユーザーが数ミリ秒間サイズ変更を停止した場合にのみ、再レンダリングが行われます。

また、描画ルーチンは毎回新しい Image オブジェクトを作成していますが、これを行う必要はありません。1 つのイメージ オブジェクトを使用して、キャンバスに複数回レンダリングできます。これにより、レンダリングが大幅に高速化されます。

お役に立てれば。

于 2011-02-28T11:17:19.543 に答える