[OneAPM] Geek programming challenge #023: Use the HTML5 canvas to generate a gradient free drop ball effect,

[OneAPM] Geek programming challenge #023: Use the HTML5 canvas to generate a gradient free drop ball effect,


Current challenges

Given the following HTML:

 
 

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

Read the following HTML5 canvas Tutorials:

Particle Motion effects implemented by HTML5 canvas

HTML5 Canvas Basics

Use the HTML5 canvas to generate a gradient ball with the Free drop effect. The effect is as follows (click to view GIF animation)

The gradient starts from # dd4814 and ends with # FFFF66.

Submission method:

• Recording Code Writing Process or final code: Click to start
• Post Release code preview address (you can embed the button in the post and reply directly using the GB button): Demo address
• [Strong reminder] Join QQ group: 157757552, award-winning users and submit express contact information
• [Strong reminder] Please add a QQ number to your personal information so that our contact can get the express address.

Sponsor OneAPM

OneAPM is a leading enterprise in the basic software field in China. It focuses on providing the next-generation application performance management software and services to help enterprise users and developers easily implement: real-time crawling of slow program code and SQL statements. IT helps users Reduce IT costs and improve business productivity. This product is suitable for complex modern application production environments. It provides end-to-end application performance management, real user experience analysis on mobile terminals and browsers, and real-time analysis of business transactions. OneAPM is the world's first company to provide performance management products at the system service layer, application layer, user experience layer, and Business Transaction layer.

Web: http://www.oneapm.com

Gift Sponsorship

3 sets of current gift (1 audio box lamp/1 selfie stick/OneAPM mascot Oula1 + notebook) sponsored by OneAPM

How to increase the chance of winning an award?

• One best interpreter: complete code recording process and Explanation
• Two participants in this award: new participants will have the opportunity to win the prize.

Prize winners

Click here to bask in the gift

Current challenges

Given the following HTML:

 
 

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

Read the following HTML5 canvas Tutorials:

Particle Motion effects implemented by HTML5 canvas

HTML5 Canvas Basics

Use the HTML5 canvas to generateFree fallEffectGradient ball, The effect is as follows (click to viewGIFAnimation)

The gradient starts from # dd4814 and ends with # FFFF66.

Submission method:

• Recording Code Writing Process or final code: Click to start
• Post Release code preview address (UseGB buttonCan be directly embedded in post reply): Demo address
• [Strong reminder]Join QQ group: 157757552, award-winning users and delivery contact information
• [Strong reminder]Add a QQ number to your personal information so that our contacts can obtain the express address.

Sponsor OneAPM

OneAPM is a leading enterprise in the basic software field in China. It focuses on providing the next-generation application performance management software and services to help enterprise users and developers easily implement: real-time crawling of slow program code and SQL statements. IT helps users Reduce IT costs and improve business productivity. This product is suitable for complex modern application production environments. It provides end-to-end application performance management, real user experience analysis on mobile terminals and browsers, and real-time analysis of business transactions. OneAPM is the world's first company to provide performance management products at the system service layer, application layer, user experience layer, and Business Transaction layer.

Web: http://www.oneapm.com

Gift Sponsorship

Current gift3Set(1 audio box lamp/1 selfie stick/OneAPM mascot Oula1 + notebook)Sponsored by OneAPM

How to increase the chance of winning an award?

• One best interpreter: complete code recording process and Explanation
• Two participants in this award: new participants will have the opportunity to win the prize.

Prize winners

Click here to bask in the gift