HTML 画布不起作用答案

【问题标题】：HTML canvas doesn't workHTML 画布不起作用
【发布时间】：2012-04-30 05:26:15
【问题描述】：

我正在制作一个显示多个航点的地图。现在它们应该用一个简单的笔划连接起来，以显示我尝试使用标签的路径。

画布已设置好，绘制发生在 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，connections是关联数组，id是唯一的id。

如果我将画布放在 html 代码的“其他标签之上”，则只有一个很大的空白区域，但绘图也不起作用。

感谢您的帮助:)

【问题讨论】：

您是否将 svg 的样式设置为笔画宽度 > 0 ？
它是一个swt-browser，它支持html 5和canvas stroke一次
只是快速看了一下，对我来说，你好像在白色画布上画白线？
是的，你没看错，颜色确实是白色，但改成黑色也没用。画布本身是透明的，因此背景中的图像应该是可见的，并且绘制的白线也应该是可见的
我们能否看到更多您的代码，即可连接对象是在哪里创建的？元素的边距在哪里设置？是否在画布完全加载之前调用了函数 connectDrawables？

标签： javascript html canvas drawing

【解决方案1】：

“ctx.closePath()”到底怎么样？？

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

【讨论】：

ctx.closePath() 不需要，ctx.stroke() 结束所有打开的图纸
@LordLeicester 这不正确，stroke() 不会关闭任何东西。