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

Source: Internet
Author: User

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


Current challenges

Given the following HTML:

 
 
  1. <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:

 
 
  1. <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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.