HTML5没有正确地绘制线条，但确实绘制了矩形

HTML5 is not drawing lines properly, but does draw rectangles

本文关键字：绘制 正确地 HTML5      更新时间：2023-09-26

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

（39259）（0375）
（39，-157）（0，-249）
（39，-233）（01458）
（0，-157）（39718）
（01198）（391337）
（39，-84）（0164）
（39，-140）（0496）
（39，-157）（0，-249）
（39，-11）（0378）
（39，-157）（0378）
（39，-233）（01300）

通过记录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();
}

谢谢你的帮助！

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

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

祝你好运！

相关文章：