javascript - マウス座標を使用したキャンバスの描画の問題？

Question

マウスのx/y座標を使用してキャンバスに描画していますが、描画している線は常に少しずれています。ここで描画してみてください：http: //zachrip.net/widgets/onlineedit/index私が言っていることの例については、 .html（左上）。オフセットがないので説明しませんので、何が問題なのかわかりません。

Answer 1

ここでの問題は、CSSを使用してCanvas Element Sizeを設定しているが、 DrawingSurfaceSizeを設定していないことです。

描画面のデフォルトサイズは300pxx150pxです。設定せずに要素サイズを設定するため、ブラウザは要素に合わせて描画面のサイズを拡大縮小します。マウスイベントを介して取得するx座標とy座標は、実際の描画サーフェスサイズではなく、要素サイズに対応します。これが、オフセットを取得する理由です。

さて、私が以前に投稿したフィドルは、要素ではなく、描画面のサイズを設定するだけでした。これは機能しますが、要素と描画サーフェスのサイズを変えたい場合は、次のこともできます。

function scaleCoords(x, y) {
    x = x * DrawingSurfaceSize.width/ElementSize.width;
    y = y * DrawingSurfaceSize.height/ElementSize.height;

    return {x: x, y: y};
}

2番目の方法の例。