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不能正確繪製線條，但會繪製矩形

回答

相關問題