1

高さにブレーキをかける Canvas でページがどのように見えるかを示す簡単なデモ。下にスクロールしてもこのキャンバスが表示されるようにする必要があります。現時点では、最初のウィンドウ ビューまでの高さを計算します。 デモ:

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;


            //canvas is showing on my demo in Fiddle

            /**
             * drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

どんな提案でも大歓迎です。

4

1 に答える 1

1

position: fixed;canvas 要素に追加することで、これを修正できます。

CSS

canvas {
    position:fixed;
    z-index:1;
}

jsfiddle

于 2013-06-20T15:17:04.897 に答える