放大或切片的一部分畫布HTML5

Question

我在HTML畫布庫上構建「PIE圖表」現在完成它，我需要 PIE圖表的縮放或切片一節點擊該部分。

我幾乎與餅圖完成上述例外只有

請不要推薦我使用現有已任圖表庫

Answer 1

你想要什麼不能直接這樣做：當你在畫布上繪製，您可以立即將乾燥的像素繪製到畫布上。如果您想「放大」，則必須擦除畫布（ctx.clearRect(...)），並使用更多像素重新繪製餅圖。這是一個非保留的繪製模式（或即時繪製模式）Canvas需要的圖形API。

對比這個與SVG，一個保留繪圖模式圖形系統，其中的命令繪製內容結果中的元素被創建，你可以跟蹤事件，調整上的屬性，參見更新您的視覺結果。

您可以「放大」 - 重繪您的餅圖更大的 - 無論是通過改變你的繪圖命令（大arc半徑，lineWidth等）或transforming your context（改變縮放和平移），然後發出相同再次繪製命令。

還有一個非選項：如果你離開畫布不變的width和height屬性，但改變CSS到height和width屬性可以「放大」你的畫布上，而無需重新繪製。這會導致畫布上的每個虛擬像素在屏幕上增長，但是會導致像素化。