2015-10-15 12 views
5

クリックしてキャンバスに四角形を作成できる単純なページを作成しようとしています。ユーザーのマウスクリックを入力として受け取り、クリックのxとyから四角形を作成します。しかし、それはある程度の長方形を側面に置いています。なぜ私はその理由がわかりません。私はこのキャンバス上に作成している矩形が正しい場所に配置されないのはなぜですか?

フィドル:https://jsfiddle.net/2717s53h/

HTML

<canvas id="cnv"></canvas> 

CSS

#cnv{ 
    width:99vw; 
    height:98vh; 
    background-color:#faefbd; 
} 

JAVASCRIPT

$(function() { 
    var canvas = $('#cnv'); 
    var canvObj = document.getElementById('cnv'); 
    var ctx = canvObj.getContext('2d'); 

    var point1 = {}; 
    var point2 = {}; 

    canvas.click(function (e) { 
     console.log(e); 

     var x = e.pageX; 
     var y = e.pageY; 

     console.log(x); 
     console.log(y); 

     if (Object.keys(point1).length == 0) 
     { 
      point1.x = x; 
      point1.y = y; 
     } 
     else if (Object.keys(point2).length == 0) 
     { 
      point2.x = x; 
      point2.y = y; 

      console.log(point1); 
      console.log(point2); 
      var width = point2.x - point1.x; 
      var height = point2.y - point1.y; 
      width = width < 0 ? width * -1 : width; 
      height = height < 0 ? height * -1 : height; 
      ctx.fillRect(x, y, 10, 10); 

      point1 = {}; 
      point2 = {}; 
     } 

    }); 
}); 
+0

[HTML5 JS fillRect()の不思議な動作]の複製があります(http://stackoverflow.com/questions/13557429/html5-js-fillrect-strange-behavior) – ieaglle

答えて

3

CSSの高さと幅とHTMLのキャンバスの属性の高さと幅には違いがあります。前者はキャンバスがページ内で占めるスペースを定義しています。後者は、レンダリングサーフェスを定義します。 concretoでは、あなたは以下のキャンバスがあるとします。キャンバスCSSがwidth: 100%; height: 100%;に設定されている1200x800サイズのビューポートと

<canvas height="400" width="600"></canvas> 

とし、その後、あなたのキャンバスがとしてレンダリングされるで2倍の大きやぼやけ伸ばし高さと幅の両方が(あなたのフィドルのように、明らかにそれらの長方形は10ピクセルより大きくなります)。結果として、ページの座標がキャンバスの座標と同期していません。あなたは、幅/高さの属性を指定しなかったので、specificationあたりとして

は、あなたのフィドルのキャンバスレンダリング面は300x150です:

幅は300にデフォルト値を属性、高さは150

にデフォルトの属性

少し修正されたyour fiddleのバージョンを参照してください。

結果(HTML、キャンバス上の非専門家として)私のアドバイスは、常にこれらの2つの属性としない表示寸法(VWのような確かに相対的なもの、対異なるレンダリング面を台無しに指定になりますvh、%、em、...)を使用してください。一部のSOユーザーはa solutionを探していますが。

+0

ありがとうございました!私は今まで知らなかった。 – Jesse

関連する問題