【OneAPM】極客編程挑戰#023：使用HTML5畫布產生漸層自由落體小球效果，

【OneAPM】極客編程挑戰#023：使用HTML5畫布產生漸層自由落體小球效果，


本期挑戰 

給定如下HTML：

 

  
<canvas id="gbcanvas" width="350" height="300"></canvas>
 

閱讀如下的相關HTML5畫布教程：

HTML5畫布實現的粒子運動效果

HTML5畫布Canvas基礎入門

請使用HTML5畫布產生一個自由落體效果的漸層小球，效果如下（點擊查看GIF動畫）

漸層色由#dd4814開始， 由#FFFF66結束

提交方式：

• 錄製代碼編寫過程或最終代碼：點擊開始
• 跟帖發布代碼預覽地址（使用GB按鈕可以直接嵌入發帖回複中）：示範地址
• 【強烈提醒】加入QQ群：157757552， 獲獎使用者及遞交快遞連絡方式
• 【強烈提醒】請在個人資訊中添加QQ號，方便我們連絡人獲得快遞地址

贊助商OneAPM

OneAPM是中國基礎軟體領域的新興領軍企業，專註於提供下一代應用效能管理軟體和服務，協助企業使用者和開發人員輕鬆實現：緩慢的程式碼和SQL語句的即時抓取。協助使用者降低IT成本，提高業務生產力。產品適用於複雜的現代應用程式生產環境，提供端到端應用效能管理、移動端和瀏覽器真實使用者體驗分析、業務交易即時分析。OneAPM也是全球率先實現同時從系統服務層、應用程式層、使用者體驗層、業務交易層提供效能管理產品的公司。

網址：http://www.oneapm.com

礼品贊助

本期礼品3套（音箱燈1個/自拍杆1個/OneAPM吉祥物Oula1個 +  筆記本） 由OneAPM鼎力贊助

如何增加獲獎機率？

• 最佳講解獎一名： 代碼錄製過程及講解詳細完整
• 本期參與獎二名： 新人蔘加本挑戰均有機會擷取獎品

晒晒往期獲獎礼物

點擊這裡晒晒礼物

本期挑戰 

給定如下HTML：

 

  
<canvas id="gbcanvas" width="350" height="300"></canvas>
 

閱讀如下的相關HTML5畫布教程：

HTML5畫布實現的粒子運動效果

HTML5畫布Canvas基礎入門

請使用HTML5畫布產生一個自由落體效果的漸層小球，效果如下（點擊查看GIF動畫）

漸層色由#dd4814開始， 由#FFFF66結束

提交方式：

• 錄製代碼編寫過程或最終代碼：點擊開始
• 跟帖發布代碼預覽地址（使用GB按鈕可以直接嵌入發帖回複中）：示範地址
• 【強烈提醒】加入QQ群：157757552， 獲獎使用者及遞交快遞連絡方式
• 【強烈提醒】請在個人資訊中添加QQ號，方便我們連絡人獲得快遞地址

贊助商OneAPM

OneAPM是中國基礎軟體領域的新興領軍企業，專註於提供下一代應用效能管理軟體和服務，協助企業使用者和開發人員輕鬆實現：緩慢的程式碼和SQL語句的即時抓取。協助使用者降低IT成本，提高業務生產力。產品適用於複雜的現代應用程式生產環境，提供端到端應用效能管理、移動端和瀏覽器真實使用者體驗分析、業務交易即時分析。OneAPM也是全球率先實現同時從系統服務層、應用程式層、使用者體驗層、業務交易層提供效能管理產品的公司。

網址：http://www.oneapm.com

礼品贊助

本期礼品3套（音箱燈1個/自拍杆1個/OneAPM吉祥物Oula1個 +  筆記本） 由OneAPM鼎力贊助

如何增加獲獎機率？

• 最佳講解獎一名： 代碼錄製過程及講解詳細完整
• 本期參與獎二名： 新人蔘加本挑戰均有機會擷取獎品

晒晒往期獲獎礼物

點擊這裡晒晒礼物