動畫使用w / javascript / canvas創建的形狀

Question

我是這里的新手，也是javascript的新手。 我正在嘗試學習如何使用JavaScript / html5 / canvas。 我一直在學習一些教程。 我已經通過了一些關於使形狀動畫化的工作，但是在繪制的形狀對用戶輸入有反應的情況下卻找不到好的形狀。 就像鼠標越過矩形導致顏色變化一樣。 甚至更好的最終是這樣的。

http://dan.forys.co.uk/experiments/mesmerizer/

誰能給我指出一個好的教程來實現這一目標？ 謝謝你丹妮拉

Answer 1

首先要澄清一件事，畫布本身並不十分了解其中的內容。 它可以告訴您像素是什么顏色，但不能告訴您此處有一個矩形或那里有一個圓形。 對於我們的目的，請考慮將畫布僅寫。 如果您想為自己的應用程序考慮SVG中存在的功能，則需要注意的是畫布得到了更廣泛的支持。

知道鼠標下的內容確實與您的應用程序有關。 在您發布的示例中，開發人員從鼠標事件中獲取X和Y位置（使用jQuery），並進行了一些快速數學運算以計算出您所在的行和列。然后，他們可以將其應用到俗語“ cell（x ，y）只是被鼠標懸停了，當您進行下一次重繪時，請考慮一下。”

畫布應用程序通常以以下方式工作：

1. 完全使用JavaScript（帶有數組，對象等）創建環境。
2. 使用渲染例程將環境繪制到畫布上。
3. 偵聽鼠標事件，計時器等。
4. 檢查事件如何影響環境。
5. 將更改應用於環境。
6. 重新使用步驟2中的渲染例程，以使用新環境更新畫布。
7. 轉到步驟3。

考慮到這一點，任何教程對Java，.Net，Android等都應該會有所幫助。它們都有自己的繪圖表面和基於它們的教程。

關於畫布，這是一個有趣的教程： http : //billmill.org/static/canvastutorial/index.html

本教程構建了一個突破游戲，該游戲可以監聽鼠標事件和計時器事件。 mouse事件不做任何檢查以查看結束了什么，但是timer事件會做一些工作來檢查球是否與塊或板球存在於同一空間中，並相應地更新畫布和JavaScript環境。