HTML画布不起作用

问题描述:

我正在处理显示几个路标的地图事物。现在他们应该连接一个简单的笔画来显示我尝试使用标签的路径。HTML画布不起作用

Canvas被设置,绘图发生在一个javascript中,该javascript评估绘制和绘制路径的位置。问题在于画布未显示,但脚本中调用的所有函数都已正确编写并调用。

的HTML的代码如下:

<body> 
    <div id="controller"> 
     <div id="zeichenfenster"> 
      <span id="maps"></span> 
      <span id="objects"></span> 
      <canvas id="canvas" height="1000px" width="2000px"></canvas> 
     </div> 
    </div> 
</body> 

...这是JavaScript的:

function connectDrawables(drawable1, drawable2, id) { 

    connections[id] = "" + drawable1 + "|" + drawable2; 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, 2000, 1000); 
    ctx.lineWidth = 5.0; 
    ctx.lineCap = "round"; 
    ctx.strokeStyle = "#FFFFFF"; 

    for(var k in connections) { 

      var string = connections[k]; 
      var sub = string.split("|"); 

      var element1 = document.getElementById(sub[0]); 
      var element2 = document.getElementById(sub[1]); 

      var x1 = 0.0 + parseFloat((element1.style.marginLeft).replace("px", "")) + 8; 
      var y1 = 0.0 + parseFloat((element1.style.marginTop).replace("px", "")) + 7; 
      var x2 = 0.0 + parseFloat((element2.style.marginLeft).replace("px", "")) + 5; 
      var y2 = 0.0 + parseFloat((element2.style.marginTop).replace("px", "")) + 4;     
      //alert("ID: " + id + "\nElement1: " + drawable1 + " x1: " + x1 + " y1: " + y1 + "\nElement2: " + drawable2 + " x2: " + x2 + " y2: " + y2); 

      ctx.beginPath(); 
      ctx.moveTo(x1, y1); 
      ctx.lineTo(x2, y2); 
      ctx.stroke(); 

    } 

} 

drawable1和2路点的ID的,连接的是一个关联数组,ID是唯一的ID。

如果我把画布放在html代码“上面”,其他标签只有一个很大的空白区域,但是图形也不起作用。

感谢您的帮助:)

+0

哪些浏览器? – 2012-04-18 18:22:48

+0

您是否让svg的笔画宽度> 0? – RGB 2012-04-18 18:23:38

+0

它是一个swt浏览器,它支持html 5,并且画布笔画一次工作 – 2012-04-18 20:02:18

怎么样 “ctx.closePath()” 进行到底?

 ctx.beginPath(); 
     ctx.moveTo(x1, y1); 
     ctx.lineTo(x2, y2); 
     ctx.stroke(); 
     ctx.closePath(); 
+0

不需要ctx.closePath(),ctx.stroke()结束所有打开的图形 – 2012-04-18 20:01:41

+0

@LordLeicester这是不正确的,stroke()不会关闭任何东西。 – Delta 2012-04-18 20:59:09

+0

关闭修补程序也不起作用 – 2012-04-19 12:45:02