【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鼎力赞助

如何增加获奖机率？

• 最佳讲解奖一名： 代码录制过程及讲解详细完整
• 本期参与奖二名： 新人参加本挑战均有机会获取奖品

晒晒往期获奖礼物

点击这里晒晒礼物