HTML5不能正确绘制线条，但会绘制矩形

由于某些原因，我正在尝试绘制的线条未显示出来。从的console.log语句的输出如下：HTML5不能正确绘制线条，但会绘制矩形

（39259）（0375）
（39 -157）（0，-249）
（39 -233）（0,1458）
（0，-157）（39718）
（0,1198）（39,1337）
（39，-84）（0164）
（39 -140）（0496）
（39， - 157）（0，-249）
（39，-11）（0378）
（39 -157）（0378）
（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(); 
}

谢谢你的帮忙！

来源

2013-07-29 Rjdlee

你能在http://jsfiddle.net上做一个完整的例子吗？我认为你目前的例子不足以诊断你的问题。 – apsillers

http://stackoverflow.com/help/how-to-ask – DevlshOne

您是否收到任何javascript错误？ –

canvas元素需要宽度和高度直接属性，不仅在CSS：<canvas id="thing" width="200px" height="200px">No support.</canvas>
你的画布是一个有点小，使其大了很多，然后再试一次。
此外，请尝试删除您的代码，并从{10,10}到{width-10，height-10}绘制一条对角线，并确保其工作优先。

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

祝你好运！

来源

2013-07-29 15:38:12

按照mdn（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D?redirectlocale=en-US&redirectslug=DOM%2FCanvasRenderingContext2D#closePath（）），所做的只是“尝试绘制从当前点到开始的一条直线“。 –

谢谢你，但不幸的是，这不是解决方案。进一步解释：有两个画布被选中，线条出现在其中一个画布上，但其他画布却没有，尽管我已经确认通过循环的某些点选择了第一个画布的上下文。 – Rjdlee

对不起，看到更新，按发布太快。 –

HTML5不能正确绘制线条，但会绘制矩形

回答

相关问题