0

ウィンドウ サイズのキャンバス要素を作成し、ランダムな値を入力しました (更新を簡単に確認できるようにするため)。ウィンドウが使用されるとサイズが変更され、<body onresize="updateCanvas();">かなり遅くなります。それがどうなるか、またはこれを行うためのより良い方法はありますか?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Window Sized Canvas</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css"/>
    Relevant style below: -->
    <style type="text/css">
        body {margin:0; padding:0;}
        canvas {display:block;}
    </style>
</head>
<body onresize="updateCanvas();">
    <canvas id="hCanvas">Your browser does not support the canvas tag</canvas>
    <script type="text/javascript">
        var jCanvas = document.getElementById("hCanvas");
        var jc2D = jCanvas.getContext("2d");

        updateCanvas();
        function updateCanvas() {
            jCanvas.width = window.innerWidth;
            jCanvas.height = window.innerHeight;            
            var jcW = jCanvas.width;
            var jcH = jCanvas.height;
            var jcWH4 = (jcW*jcH)<<2;
            var jcImageData = jc2D.createImageData(jcW, jcH);
            for (i = 0; i < jcWH4; i += 4) {
                jcImageData.data[i] = (Math.random()*255)|0;
                jcImageData.data[i+1] = (Math.random()*255)|0;
                jcImageData.data[i+2] = (Math.random()*255)|0;
                jcImageData.data[i+3] = 255;
            }
            jc2D.putImageData(jcImageData, 0, 0);
        }
    </script>
</body>
</html>

編集：制限するための素敵なコードを見つけましonresize()た。上記と異なる点のみを掲載します。

...
<body onresize="resizeTimer();">
...
var resizeDelay;
function resizeTimer() {
    clearTimeout(resizeDelay);
    resizeDelay = setTimeout("updateCanvas()", 200);
}
...
4

2 に答える 2

0

正確に決定されたピクセル値でキャンバスを再描画すると、ほとんど何があっても遅くなります。まともなサイズの画面には多くのピクセルがあり、JavaScript で各ピクセルを見つめてどのように描画するかを決定するには時間がかかります。

おそらく最も簡単な方法は、CSS を使用してキャンバスを拡大または縮小することです。これは、コンピューターに組み込まれた強力な画像スケーリング機能に依存しているため、非常に高速です。毎回新しい再計算を行うわけではありませんが、それが重要でない限り、かなり高速になります。これがこれの実装です。キャンバスの属性 "height" と "width" はレンダリング領域のサイズ (ピクセル単位) に影響しますが、スタイルプロパティの "height" と "width" は、描画する必要があるピクセル数を変更せずにキャンバスが占める領域に影響します。と。

詳しく説明すると、何も再描画せずにキャンバスの属性ベースのサイズを大きくすると、前の画像が変更されないことに気付くでしょう。キャンバスに余白を追加しただけです。ただし、スタイルを変更するだけで、キャンバスは指定したサイズになりますが、理論的にはキャンバス上のすべてがそのサイズで高解像度になる可能性がある場合でも、粗く見える場合があります。

これにより、操作している画像に奇妙なアーティファクトが作成されますが、それを回避する簡単な方法はありません。できることの 1 つは、キャンバスのサイズが変更されるたびにデフォルトで CSS を使用することですが、サイズ変更が完了したら、新しいより高い解像度のパターンで再描画します。このルートに進むことに決め、それについて何か助けが必要な場合は、私に知らせてください.

于 2013-03-01T22:53:12.363 に答える