0

出于某种原因，我试图绘制的线条没有出现。console.log 语句的输出如下：

(39,259) (0,375)
(39,-157) (0,-249)
(39,-233) (0,1458)
(0,-157) (39,718)
(0,1198) (39,1337)
(39 ,-84) (0,164)
(39,-140) (0,496)
(39,-157) (0,-249)
(39,-11) (0,378)
(39,-157) (0,378)
(39,- 233) (0,1300)

通过记录 ctxt，我确认这不是问题。画布的样式如下：

width: 35px;
height:1879px;
left: 415px;
position: absolute;
margin-top: 4.4%;

我已经用绘制一个矩形进行了测试，这似乎有效。

for (var a = 0; a < arrows.length; a++) {
    var ctxt,
    ctxtX = 0,
    tgtX = 0;
    tgtGroup = groups[arrows[a].getAttribute('data-gID') - 1],
    categoryTxt = tgtGroup.parentNode.firstChild.innerHTML,
    arrowCatTxt = arrows[a].parentNode.parentNode.firstChild.innerHTML;

    if(categoryTxt == 'Engineering' && arrowCatTxt == 'Administration') {
        ctxt = canvases[0].getContext("2d");
        tgtX = canvases[0].offsetWidth;
    } else if(categoryTxt == 'Engineering' && arrowCatTxt == 'Fabrication') {
        ctxt = canvases[1].getContext("2d");
        tgtX = canvases[0].offsetWidth;
    } else if(categoryTxt == 'Administration' && arrowCatTxt == 'Engineering') {
        ctxt = canvases[0].getContext("2d");
        ctxtX = canvases[0].offsetWidth;
    } else {
        ctxt = canvases[1].getContext("2d");
        ctxtX = canvases[1].offsetWidth;
    }


    console.log('('+ctxtX +','+ (arrows[a].offsetTop - canvases[0].offsetTop) + ') (' + tgtX + ',' + (tgtGroup.offsetTop - canvases[0].offsetTop) + ')');

    ctxt.beginPath();
    ctxt.strokeStyle = "#000";
    ctxt.lineWidth = 10;
    ctxt.moveTo(ctxtX, Math.abs(arrows[a].offsetTop - canvases[0].offsetTop));
    ctxt.lineTo(tgtX, Math.abs(tgtGroup.offsetTop - canvases[0].offsetTop));
    ctxt.stroke();
}

谢谢您的帮助！

4

1 回答 1

0
  • canvas元素直接需要width和height属性，不仅仅在css中：<canvas id="thing" width="200px" height="200px">No support.</canvas>
  • 你的画布有点小，把它放大很多，然后再试一次。
  • 还可以尝试删除您的代码，并从 {10,10} 到 {width-10, height-10} 仅绘制一条对角线，并确保首先有效。

如果您有多个画布，请确保 id 不同，并且您为上下文使用不同的变量。此外，检查元素并确保它们没有重叠。

祝你好运！

于 2013-07-29T15:38:12.530 回答