更改HTML5畫布中形狀的顏色

Question

我正在研究在html5中顯示交互式地圖。

我已經將地圖區域創建為數字數組（代表坐標），例如：

Zone1=[{x=3,y=4}, {x=8,y=5}]

而且我還創建了一個地圖，其中包含一系列區域，例如：

map=[zone1, zone2....]

我沒有問題可以使用context.lineTo()函數在畫布上繪制區域，這與我能夠捕獲單擊時鼠標位置並使用多邊形算法中的點確定用戶單擊的區域相同。

當我想在單擊區域時填充區域的顏色時，就會出現困難。

有人有想法嗎？

PS：

• 我做的形狀不規則
• 我不喜歡使用jQuery等JavaScript庫

Answer 1

HTML5 Canvas不了解您可以操縱的對象形狀的概念。 您有兩種選擇：

• 使用SVG繪制所需的內容（ 在W3Schools上 查看示例 ）
• 使用一些JS畫布庫，該庫添加了抽象以提供形狀的概念（請查看EasleJS ）
• 在畫布上編寫自己的抽象以提供形狀

但是，您應該知道，即使有了這樣的庫，“形狀”也將被完全重繪。 可能會重繪整個場景。 SVG可以緩解這種情況，隨着形狀/對象數量的增加，其性能會降低。

Answer 2

你不能 將創建的形狀添加到畫布后，它們就不會成為變量或任何形式的引用。 您可以在舊顏色上用新顏色重新繪制形狀，但是我認為最好的選擇是使用一個庫來為您處理。

由於我自己使用過，因此我的建議是Kinetic.js，但是有很多可供選擇。