更改HTML5畫布中形狀的顏色

Question

我正在使用html5顯示交互式地圖。

我已創建地圖的區域爲數字（表示座標） 等的陣列：

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

和我還創建了一個地圖，其是區域 像的數組：

map=[zone1, zone2....] 

我沒有問題使用context.lineTo()函數在畫布中繪製區域，就像我能夠在點擊時捕獲鼠標位置並確定用戶使用多邊形算法中的點所點擊的區域一樣。

當我點擊時要填充區域的顏色時，會出現困難。

有人有想法嗎？

PS：

• 我所做的形狀是不規則的
• 我在使用JavaScript庫如jQuery或其他任何

Answer 1

你不能又不是。一旦將它們添加到畫布中，您創建的形狀就不是變量或任何可引用的。你可以用舊的顏色重新繪製一個新的顏色，但我認爲你最好的選擇是使用一個庫來爲你處理這個問題。

由於我自己使用它，我自己的建議將是Kinetic.js，但有很多選擇。

Answer 2

HTML5 Canvas不知道可以操作的對象形狀的概念。您的情況兩種選擇：

• 使用SVG繪製你需要什麼（check exampleson W3Schools）
• 使用一些JS帆布庫，增加了抽象提供形狀的概念（看看EasleJS）
• 寫你自己抽象畫布以提供形狀

但是你應該知道，即使有這樣的庫，「形狀」也會被完全重繪。可能整個場景都會重繪。 SVG減輕了這一點，它的性能隨着形狀/對象數量的增長而下降。