Question

我在使用Javascript在Canvas上绘制线条时遇到一些问题。

我有一个包含画布和一些小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>

和一些Javascript代码，使用jquery从一个div到另一个div绘制线来获取div位置：

<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的left和top属性代表div的左上角，所以我不明白为什么这些线被绘制得更靠近右下角。最奇怪的是，这种行为与最新的Firefox，Safari和Chrome for Mac一致，但未使用jsfiddle.net进行验证：

http://jsfiddle.net/KnmXb/

这就是页面的行为方式。我注意到在jsfiddle中取消选择“Normalized CSS”会以与safari，firefox和chrome相同的方式绘制线条。

任何人都可以告诉我，如果我做错了吗？

Answer 1

首先：使用jquery-function offset（）代替css（'left'）/ css（'top'）

第二名：在画布偏移上移动坐标

<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>

使用一些偏移绘制HTML5画布线

1 个答案: