1

私のhtmlでは、キャンバスのサイズを幅と高さのパーセントに変更するために次のものがあります。

#canvas,
#canvasCursor {
    cursor: none;
    background: #fff;
    position: absolute;
    left: 50px;
    top: 30px;
    width: 62%;
    height: 80%;
    z-index: 1;
}

ただし、これにより、描画と xy リスナーのサイズが大きくなるようです。ここをクリックする
だけで、私の言いたいことがわかるでしょう。

4

4 に答える 4

2

2 つの問題:

1) CSS ルールを使用してキャンバスの幅を設定しています。これではうまくいきません。キャンバスのサイズを設定しない場合、CSS で設定した内容に関係なく、デフォルトで 300 x 150 ピクセルになります。これは、その中のすべてがスケーリングされることを意味します (あたかもキャンバスが基本的に何であるかである固定サイズの画像であるかのように)。サイズを設定しても CSS を使用する場合、そのサイズはスケーリングされます。

パフォーマンスと品質が低下し、マウスの位置も再計算する必要があります。

Javascript からサイズを更新する必要があります。

#canvas, #canvasCursor {
    cursor: none;
    background: #fff;
    position: absolute;
    left: 50px;
    top: 30px;
    width: 62%; /* REMOVE */
    height: 80%;  /* REMOVE */
    z-index: 1;
}

2) どこからでもキャンバス サイズを更新していません。幅と高さのプロパティを設定することでキャンバスを更新できます - 使用できるウィンドウのサイズに設定します:

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

        //call redraw
   }

または、パーセンテージに設定する場合は、キャンバスが % 値を取らないため、これを自分で計算する必要があります。

    window.onresize = function() {
        canvas.width = window.innerWidth * 0.62; //ie. 62% of width
        canvas.height = window.innerHeight * 0.8; //ie. 80% of height

        //call redraw
   }

この要素は特殊なケースであるため、Canvas はピクセル サイズのみを使用します。

なぜ内側の幅/高さ? これは、表示されるウィンドウの実際のビューポートを表します (モバイル デバイスを使用すると、より明確に表示されます)。

固定サイズが必要な場合は、直接設定できます。

canvas.width = 800;
canvas.height = 600;

なぜ更新 (すべてを再描画) する必要があるのですか? Canvas は、描画されたもののスナップショットのみを保持します。そのコピーは保持しません。画面に映っているのはそれです。

サイズを変更すると、再初期化されるため、再度更新する必要があります。再描画するものがたくさんない限り、これはパフォーマンス コストがほとんどかかりません。これは、ユーザーがブラウザ ウィンドウのサイズを変更した場合にのみ発生します。

于 2013-06-17T01:17:48.323 に答える
0

キャンバスのサイズが変更されたら、それに応じて幅と高さを再設定する必要があります。onresizeイベントでこれを行うことができます：

window.onresize = function () {
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;

    // repaint everything
}

描画キャンバスとカーソル キャンバスの両方で行う必要があります。キャンバスのサイズを変更するとすべてがクリアされ、再描画が必要になることに注意してください。

于 2013-06-17T00:50:43.970 に答える
0

キャンバスのサイズが変更されると、自動的にクリーンアップされることに注意してください。つまり、キャンバスに描かれたものはすべて完全に消えてしまいます。したがって、パーセンテージを選択しないか、サイズ変更イベントに再描画機能を追加することをお勧めします。

于 2013-06-17T00:52:12.757 に答える