Question

出于某种原因，我试图绘制的线条没有出现。 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();
}

感谢您的帮助！

Answer 1

canvas元素直接需要width和height属性，而不仅仅是css：<canvas id="thing" width="200px" height="200px">No support.</canvas>
你的画布有点小，要做得更大，然后再试一次。
同时尝试删除您的代码，并从{10,10}到{width-10，height-10}只绘制一条对角线，并确保首先使用。

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

祝你好运！

HTML5不是正确绘制线条，而是绘制矩形

1 个答案: