1

キャンバスに描画しようとしていますが、マウスの位置がずれています。描画すると右にずれすぎているようです。

キャンバスは中央に配置され、幅は 960px です。

ページの URL は次のとおりです: http://passion4web.co.uk/ben/canvas/app/

次の関数を使用して、マウスの位置を取得しています。

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };  
    }
4

1 に答える 1

4

キャンバスには 2 つの異なるサイズがあります。

  • ページ上のサイズ
  • 画像のピクセル単位のサイズ

正確な 1:1 レンダリングを行うには、ピクセル単位のキャンバス サイズをページのサイズに設定する必要があります。

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

widthキャンバス オブジェクトの/メンバーを設定すると、画像がクリアされることに注意してくださいheight(現在存在する同じ値を設定している場合でも)。

于 2013-08-27T10:00:50.080 に答える