[英]Arbitrary shape getting drawn in HTML5 canvas
我正在嘗試使用HTML5 canvas元素繪制圖形。 該圖由頂點和連接這些頂點的邊組成。 我用小圓圈表示頂點,用連接圓圈的線表示邊緣。
在我的項目中,我想在按下“下一步”按鈕時更改頂點的位置。 下面顯示的是頁面首次加載時畫布的狀態:
單擊“下一步”按鈕后,將根據頂點的新坐標重新繪制圖形。 但是,渲染似乎出現錯誤,如下所示:
奇怪的是,我沒有在任何地方使用fill()函數,所以我無法理解為什么填充部分會來。 以下是用於繪制圖形的draw()函數的代碼:
function draw(position)
{
var canvas_elem = document.getElementById('drawing');
// Check the element is in the DOM and the browser supports canvas
if(canvas_elem.getContext)
{
// Initaliase a 2-dimensional drawing context
var canvas = canvas_elem.getContext('2d');
// Clear canvas
canvas.clearRect(0, 0, canvas_elem.width, canvas_elem.height);
var data = data_array[num_vertices+1+position].split(",");
// Draw all vertices
for( var i=0; i<num_vertices; i++)
{
canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
canvas.fillStyle = 'black';
canvas.fill();
}
// Connect vertices by lines according to adjacency matrix
for(var i=0;i<num_vertices; i++)
{
for(var j=i; j<num_vertices; j++)
{
if(adjacency[i][j]==1)
{
canvas.beginPath();
canvas.moveTo(data[2*i],data[2*i+1]);
canvas.lineTo(data[2*j],data[2*j+1]);
canvas.stroke();
}
}
}
}
else
{
alert("Please use an HTML5 compatible browser.");
}
}
有什么線索可能會發生在這里嗎?
取這些變量的以下值進行調試:
data_array=[
"10",
"0,1,1,0,0,0,0,0,0,0",
"1,0,0,1,0,0,0,0,0,1",
"1,0,0,0,1,0,0,0,0,1",
"0,1,0,0,0,1,0,0,1,1",
"0,0,1,0,0,0,1,0,1,1",
"0,0,0,1,0,0,0,1,1,0",
"0,0,0,0,1,0,0,1,1,0",
"0,0,0,0,0,1,1,0,0,0",
"0,0,0,1,1,1,1,0,0,0",
"0,1,1,1,1,0,0,0,0,0",
"10,2,35.4,23.3,88.9,100,210,350,70,500,412,208,336,112,45,32,89,92,102,23",
"30,4,19.4,35.3,80.9,90,230,310,120,440,400,220,330,105,40,29,80,89,90,18"
]
num_vertices=10
.arc()
方法將點添加到當前路徑,而.fill()
方法將填充當前路徑。 如果繼續調用.arc()
,那么您將重新使用同一路徑,因此最終將被填充。 使用.beginPath()
開始新路徑:
// Draw all vertices
for( var i=0; i<num_vertices; i++)
{
canvas.beginPath();
canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
canvas.fill();
}
或者,使用.moveTo()
開始一個新的子路徑。 這樣,您只需一次調用.fill()
即可一次繪制所有點。
// Draw all vertices
for (var i = 0; i < num_vertices; i++) {
var x = data[2 * i];
var y = data[2 * i + 1]
canvas.moveTo(x, y);
canvas.arc(x, y, radius, 0, 2 * Math.PI, false);
}
canvas.fill();
根據規范 , .arc()
不應創建新路徑或子路徑。 Google Chrome瀏覽器中.arc()
的實現不符合規范。 在Chrome中,每次調用.arc()
創建一個新的子路徑。 此行為是非標准的。
好的,這是一個愚蠢的錯誤。 我忘了在繪制每條線后調用closePath()。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.