相同的電話電弧產生不同大小

我試圖找出爲什麼繪製形狀，然後繪製了它在新的顏色（如雖然以突出顯示它），然後重新繪製原始（未突出顯示）正在留下高亮顏色的痕跡。相同的電話電弧產生不同大小

我在this fiddle再現的問題。楔形物以淺藍色繪製。有一個紅色按鈕將以紅色繪製，然後是另一個重新繪製原始形狀的按鈕。所有參數都是相同的（除了顏色），但是在點擊按鈕重置顏色後，楔子上會有一絲微弱的紅色。

前：

enter image description here

後：

enter image description here

下面是相關代碼：

drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)"); 

$("#red").click(function() { 
    drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)"); 
}); 

$("#back").click(function() { 
    drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)"); 
}); 

function d2r(degrees) { 
    return degrees * (Math.PI/180.0); 
} 

function drawWedge(centerX, centerY, r, start, end, color) { 
    context.beginPath(); 
    context.moveTo(centerX, centerY); 
    context.arc(centerX, centerY, r, d2r(start), d2r(end), false); 
    context.closePath(); 
    context.fillStyle = color; 
    context.fill(); 
}

來源

2012-01-12 Adam Rackis

你是故意不清除繪製新的幀之前的印刷品嗎？如果沒有，那麼解決方法是簡單的：http://jsfiddle.net/X7deh/1/ – Esailija 2012-01-12 23:06:20

@Esailija - 剛學的畫布，所以我不會刻意做什麼。拋出 - 這是正確的答案。 – 2012-01-12 23:16:35

@Esailija - 我只是查了一下這個方法，看起來它的名字就是這麼做的。我無法真正清除這個楔子周圍的矩形，因爲旁邊會有很多其他的東西。（我正在製作餅圖以獲得樂趣）。有沒有clearArc方法，所以你會推薦什麼 – 2012-01-12 23:19:52

當在畫布上繪畫，它只是不斷stacking things on top of each other until you clear it。要清除它最簡單的方法是ctx.clearRect(0,0,width,height)

我把你的drawWedge功能在這裏：

http://jsfiddle.net/X7deh/1

來源

2012-01-12 23:18:29 Esailija

看到我上面的評論。因此，如果我製作餅圖，您是否會建議我只清除整個圖表並重新繪製，以便突出顯示/忽略楔形圖？這似乎很難有效 – 2012-01-12 23:21:01

@AdamRackis你是正確的，這是不高效的。遲早你必須清理畫布並畫一個新的畫框。要突出顯示，您將重新繪製具有不同顏色的突出楔形的整個餅圖。如果有幫助的話，我從來沒有遇到任何性能問題。 – Esailija 2012-01-12 23:24:48

每次重繪都會讓我的代碼變得更加清晰，所以我會追求這一點，但出於好奇，你知道爲什麼這個例子不起作用嗎？這些弧線的大小不一樣嗎？ – 2012-01-12 23:40:14

這個問題已經回答了，但我想給一點更透徹的解釋。

enter image description here

當你畫對角線處，你穿過（在我的例子顯示）的像素「零件」。那麼瀏覽器對形狀外部的像素部分做了什麼？它使用抗鋸齒（對於瀏覽器，抗鋸齒始終處於默認狀態）以對像素的其餘部分着色（如果您沒有抗鋸齒，則鋸線看起來會鋸齒狀）。如果你注意到，紅色的微弱的痕跡不是鮮紅的，因爲它由於抗鋸齒而變得混合。而你看到它的原因是因爲當你在畫布上繪製你的形狀時，紅色的微弱的痕跡不是你的形狀的一部分，而是你的形狀外部像素的一部分。

現在的答覆中提到，您可以撥打clearRect清除畫布。但是，您應該閱讀這個SO question，因爲它更詳細地解釋了事情（所選答案不如第二個答案）。此外，有沒有想過爲什麼他們稱之爲「畫布」？想想藝術家使用的實際藝術畫布，一旦他們在畫布上畫畫，除非您獲得新的畫布或畫布，否則無法取下它！

來源

2012-01-13 00:00:05

良好的信息，謝謝你！ – 2012-01-13 00:07:06

相同的電話電弧產生不同大小

回答

相關問題