HTML5のキャンバスラインがオフセットで描画されています

Question

Javascriptを使用してキャンバスに線を描画する際に問題が発生します。

私はキャンバスといくつかの小さなdivを含むページがあります。

<canvas id="myCanvas" width ="500" height="500"></canvas> 
<div id="1111" title ="test div1" style=" position:absolute; left: 10px; top: 30px; z-index:3; width:6px; height:6px; background-color:green"> </div> 
<div id="2222" title ="test div2" style=" position:absolute; left: 90px; top: 30px; z-index:3; width:6px; height:6px; background-color:black;"> </div> 
<div id="3333" title ="test div4" style=" position:absolute; left: 50px; top: 60px; z-index:3; width:6px; height:6px; background-color:blue; "> </div> 
<div id="4444" title ="test div3" style=" position:absolute; left: 70px; top: 70px; z-index:3; width:6px; height:6px; background-color:yellow;"> </div> 

とdivの位置を取得するためにjqueryのを使用して別のdiv要素から線を描画するJavaScriptコード：

<script> 
var canv = document.getElementById("myCanvas"); 
var div1 = "1111"; 
var div2 = "2222"; 
var div3 = "3333"; 

var left_1= $("#"+div1).css("left") ; 
var top_1= $("#"+div1).css("top") ; 
left_1=parseFloat(left_1); 
top_1=parseFloat(top_1); 

var left_2= $("#"+div2).css("left") ; 
var top_2= $("#"+div2).css("top") ; 
left_2=parseFloat(left_2); 
top_2=parseFloat(top_2); 

var left_3= $("#"+ div3).css("left") ; 
var top_3= $("#"+ div3).css("top") ; 
left_3=parseFloat(left_3); 
top_3=parseFloat(top_3); 

var cxt=canv.getContext("2d"); 
cxt.lineWidth=5; 
cxt.strokeStyle="#FF0000"; 

cxt.moveTo(left_1,top_1); 
cxt.lineTo(left_2,top_2); 
cxt.lineTo(left_3,top_3); 

cxt.stroke(); 

を

問題は、描かれている線が、あるはずのあるところから遠くにあるピクセルであることです。私は、divの左上隅の属性がdivの左上隅を表していることを知っているので、なぜ右下隅に近い線が引かれているのかわかりません。 奇妙なことは、この動作は、Mac用の最新のFirefox、SafariとChromeでpersistenされているが、jsfiddle.netを使用して検証していないということです。

http://jsfiddle.net/KnmXb/

これは、ページが動作するようになっている方法です。 jsfiddleの "Normalized CSS"の選択を解除すると、Safari、FireFox、およびChromeが行っているのと同じように行が描画されることに気がつきました。

私が何か間違っているのか誰にでも教えてもらえますか？

Answer 1

• 最初：オフセット使用jqueryの関数（）の代わりにCSSの（ '左'）/ CSS（ 'トップ'）

• 秒：キャンバス上のシフトCOORDSは

  <script> 
  
  var oCanvas = $('#myCanvas').offset(); 
  oCanvas.left-=3; 
  oCanvas.top-=3; 
  
  
  var canv = document.getElementById("myCanvas"); 
  var div1 = "1111"; 
  var div2 = "2222"; 
  var div3 = "3333"; 
  
  var o1 = $('#' + div1).offset(); 
  var o2 = $('#' + div2).offset(); 
  var o3 = $('#' + div3).offset(); 
  
  
  var cxt=canv.getContext("2d"); 
  cxt.lineWidth=5; 
  cxt.strokeStyle="#FF0000"; 
  
  cxt.moveTo(o1.left - oCanvas.left,o1.top - oCanvas.top); 
  cxt.lineTo(o2.left - oCanvas.left,o2.top - oCanvas.top); 
  cxt.lineTo(o3.left - oCanvas.left,o3.top - oCanvas.top); 
  
  cxt.stroke(); 
  </script>