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代码“上面”,其他标签只有一个很大的空白区域,但是图形也不起作用。
感谢您的帮助:)
怎么样 “ctx.closePath()” 进行到底?
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.closePath();
不需要ctx.closePath(),ctx.stroke()结束所有打开的图形 – 2012-04-18 20:01:41
@LordLeicester这是不正确的,stroke()不会关闭任何东西。 – Delta 2012-04-18 20:59:09
关闭修补程序也不起作用 – 2012-04-19 12:45:02
哪些浏览器? – 2012-04-18 18:22:48
您是否让svg的笔画宽度> 0? – RGB 2012-04-18 18:23:38
它是一个swt浏览器,它支持html 5,并且画布笔画一次工作 – 2012-04-18 20:02:18