0

2 つの黒いキャンバスで開始し、各行に赤い線を引くことで一度に 1 行ずつキャンバスを更新する HTML 5 コードがあります。黒い背景の上に赤いカーテンが垂れ下がっているように見えるはずです。

奇妙な点は、最初はランダムな行 (たとえば 5%) がスキップされて黒のままになっているように見えることです。私はバグがあると思った。しかし、その後、ブラウザー ウィンドウのサイズを変更すると、黒い線がすべて赤くなることに気付きました。それで、ある種のブラウザの再描画バグだと思いました。その後、Chrome と Safari の両方にこの動作があることに気付きました。

これらのブラウザの両方に同じバグがあると思いますか、それとも私が何か間違ったことをしているのですか?

興味深いことに、両方のキャンバスで style="width:100%; height:100%" を使用すると、この問題はなくなります。

<html>
<table>
    <tr>
        <td><canvas id="myCanvas1" style="width:100%; height:100%"></canvas></td>
        <td><canvas id="myCanvas2" style="width:200px; height:400px"></canvas></td>
    </tr>
</table>
<script type="text/javascript">
    var canvases = [document.getElementById("myCanvas1"), document.getElementById("myCanvas2")];

    for(var i = 0; i < canvases.length; i++) {
        var canvas = canvases[i];
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    function updateRow(rowNum) { 

        var done = true;
        for(var i = 0; i < canvases.length; i++) {
            var canvas = canvases[i];

            if(rowNum >= canvas.height) {
                return;
            }
            done = false;

            var ctx = canvas.getContext("2d");

            var imageDataForRow = ctx.getImageData(0, rowNum, canvas.width, 1);

            for(var offset = 0; offset < imageDataForRow.data.length; offset += 4) {
                imageDataForRow.data[offset] = 255;
                imageDataForRow.data[offset + 1] = 0;
                imageDataForRow.data[offset + 2] = 0;
                imageDataForRow.data[offset + 3] = 255;
            }

            ctx.putImageData(imageDataForRow, 0, rowNum);
        }

        if(!done) {
            var paintNextRow = function() {
                updateRow(rowNum + 1);
            }
            setTimeout(paintNextRow, 1);
        }
    }

    updateRow(0);

</script>

4

1 に答える 1

1

これはあなたの問題です：

<canvas id="myCanvas1" style="width:100%; height:100%">

<canvas>html 属性ではなく、CSS の幅と高さを使用して Canvas の幅と高さを設定しています。文字通り、サイズが 300x150 (デフォルト) のキャンバスを引き延ばして、画面全体に歪ませています。

canvas タグで幅/高さを定義する必要があります。<canvas width="500" height="500">

またはコードで：

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

そしてCSSによるものではありません。これを行った場合：

<canvas style="width: 500px; height: 500px;">

次に、300x150 のキャンバス (デフォルト サイズ) を 500x500 にスケーリング/ワープしたものを作成します。これは、ほぼ確実に得られるものです。

キャンバスの幅を動的に変更したいようです。これで問題ありませんが、いくつかのことのうちの 1 つを行う必要があります。1 つは、ウィンドウのonresizeイベントを使用し、これが発生するたびにキャンバス幅を div の clientWidth に等しく設定することです (もちろん clientWidth が変更された場合)。もう 1 つは、単純な一般的なタイマーを実行して、0.5 秒ごとに同じことをチェックし、にcanvas.width等しく設定することdiv.style.clientWidthです。

（フリーハンドで書いたので誤字脱字があるかもしれませんがご了承ください）

于 2012-04-16T16:14:50.930 に答える