【OneAPM】极客编程挑战#023：使用HTML5画布生成渐变自由落体小球效果

浅浅的花香味﹌ 2022-08-01 06:07 110阅读 0赞

[![0fd20dda-1350-49a7-844c-7580284f4235.jpg][]][0fd20dda-1350-49a7-844c-7580284f4235.jpg 1]

## 本期挑战  ##

给定如下HTML：

阅读如下的相关HTML5画布教程：

> [HTML5画布实现的粒子运动效果][HTML5]
> 
> [HTML5画布Canvas基础入门][HTML5_Canvas]

请使用HTML5画布生成一个自由落体效果的渐变小球，效果如下（点击下图查看GIF动画）

> 渐变色由\#dd4814开始， 由\#FFFF66结束

[![a95e8549-2822-4235-89d3-a4d9bcb49ede.gif][]][a95e8549-2822-4235-89d3-a4d9bcb49ede.gif 1]

## 提交方式： ##

*  录制代码编写过程或最终代码：[点击开始][Link 1]
 *  跟帖发布代码预览地址（使用GB按钮可以直接嵌入发帖回复中）：[演示地址][Link 2]
 *  【强烈提醒】加入QQ群：157757552， 获奖用户及递交快递联系方式
 *  【强烈提醒】请在个人信息中添加QQ号，方便我们联系人获得快递地址

## 赞助商OneAPM ##

> OneAPM是中国基础软件领域的新兴领军企业，专注于提供下一代应用性能管理软件和服务，帮助企业用户和开发者轻松实现：缓慢的程序代码和SQL语句的实时抓取。帮助用户降低IT成本，提高业务生产力。产品适用于复杂的现代应用程序生产环境，提供端到端应用性能管理、移动端和浏览器真实用户体验分析、业务交易实时分析。OneAPM也是全球率先实现同时从系统服务层、应用层、用户体验层、业务交易层提供性能管理产品的公司。
> 
> 网址：[http://www.oneapm.com][http_www.oneapm.com]

## 礼品赞助 ##

本期礼品3套（音箱灯1个/自拍杆1个/OneAPM吉祥物Oula1个 +  笔记本） 由OneAPM鼎力赞助

[![a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg][]][a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg 1]

[![de750f08-afce-428c-9859-5019900bf67c.jpg][]][de750f08-afce-428c-9859-5019900bf67c.jpg 1]

[![cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg][]][cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg 1]

## 如何增加获奖机率？ ##

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

## 晒晒往期获奖礼物 ##

> [点击这里晒晒礼物][Link 3]

[![0fd20dda-1350-49a7-844c-7580284f4235.jpg][]][0fd20dda-1350-49a7-844c-7580284f4235.jpg 1]

## 本期挑战  ##

给定如下HTML：

阅读如下的相关HTML5画布教程：

> [HTML5画布实现的粒子运动效果][HTML5]
> 
> [HTML5画布Canvas基础入门][HTML5_Canvas]

请使用HTML5画布生成一个**自由落体**效果的**渐变小球**，效果如下（点击下图查看**GIF**动画）

> 渐变色由\#dd4814开始， 由\#FFFF66结束

[![a95e8549-2822-4235-89d3-a4d9bcb49ede.gif][]][a95e8549-2822-4235-89d3-a4d9bcb49ede.gif 1]

## 提交方式： ##

*  录制代码编写过程或最终代码：[点击开始][Link 1]
 *  跟帖发布代码预览地址（使用**GB按钮**可以直接嵌入发帖回复中）：[演示地址][Link 2]
 *  **【强烈提醒】**加入QQ群：157757552， 获奖用户及递交快递联系方式
 *  **【强烈提醒】**请在个人信息中添加QQ号，方便我们联系人获得快递地址

## 赞助商OneAPM ##

## 礼品赞助 ##

本期礼品**3**套**（**音箱灯1个/自拍杆1个/OneAPM吉祥物Oula1个 +  笔记本**）** 由OneAPM鼎力赞助

[![a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg][]][a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg 1]

[![de750f08-afce-428c-9859-5019900bf67c.jpg][]][de750f08-afce-428c-9859-5019900bf67c.jpg 1]

[![cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg][]][cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg 1]

## 如何增加获奖机率？ ##

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

## 晒晒往期获奖礼物 ##

> [点击这里晒晒礼物][Link 3]

[0fd20dda-1350-49a7-844c-7580284f4235.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0fd20dda-1350-49a7-844c-7580284f4235.jpg
[0fd20dda-1350-49a7-844c-7580284f4235.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0fd20dda-1350-49a7-844c-7580284f4235.jpg
[HTML5]: http://www.gbtags.com/gb/gbliblist/8.htm
[HTML5_Canvas]: http://www.gbtags.com/gb/gbliblist/1.htm
[a95e8549-2822-4235-89d3-a4d9bcb49ede.gif]: http://www.gbtags.com/gb/networks/uploadimgthumb/a95e8549-2822-4235-89d3-a4d9bcb49ede.gif
[a95e8549-2822-4235-89d3-a4d9bcb49ede.gif 1]: http://www.gbtags.com/gb/networks/uploadimg/a95e8549-2822-4235-89d3-a4d9bcb49ede.gif
[Link 1]: http://www.gbtags.com/gb/rtrecorder.htm
[Link 2]: http://www.gbtags.com/gb/rtreplayerpreview/575.htm
[http_www.oneapm.com]: http://www.oneapm.com/
[a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg
[a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/a3c749fa-cdbb-40ac-9cd1-9572b9e0ab35.jpg
[de750f08-afce-428c-9859-5019900bf67c.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/de750f08-afce-428c-9859-5019900bf67c.jpg
[de750f08-afce-428c-9859-5019900bf67c.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/de750f08-afce-428c-9859-5019900bf67c.jpg
[cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg
[cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/cdf42c10-dc5e-45e4-b3d9-3720f1a4c803.jpg
[Link 3]: http://www.gbtags.com/gb/tag/1322.htm