3

これは、nycnik によって提案された答えを考慮した簡略化されたコードです。コードはうまく機能しますが、スケールとオフセットはまだずれています。クリックしてドラッグして離すと、描画された線が約 2 倍ずれて表示されます。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="st.css" media="all"/>
    <script>
var x, y;
function getXY(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return [e.clientX - rect.left, e.clientY - rect.top];
}

function move(ca, e) {


}

function mark(ca, e) {
    [x,y] = getXY(ca, e);
}

function clickDrag(ca, e) {
    var c = ca.getContext("2d");
    var x2, y2;
    [x2,y2] = getXY(ca, e);
    c.fillStyle='#00FF80';
    c.lineStyle='#FFFF80';
    c.moveTo(x,y);
    c.lineTo(x2,y2);
    c.stroke();  
}
    </script>
  </head>
  <body>
    <div class="bg">
      <canvas id="q13g" onmousedown="mark(this,event)" onmouseup="clickDrag(this, event)">
      </canvas>
    </div>
  </body>
</html>
4

1 に答える 1

3

以下とこのチュートリアルで見たように、見たclientXと外接する四角形を使用して変換する必要があります。

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

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

于 2013-06-10T03:29:54.063 に答える