Javascript implementation is very romantic bubbles emerge special effect _ javascript skills

This article mainly introduces javascript to implement very romantic bubble pop-up special effects. If you need it, you can refer to the example in this article to describe javascript to implement very romantic bubble pop-up special effect code. Share it with you for your reference. The details are as follows:
The running effect is as follows:

The Code is as follows:

Implementation ideas:Only one CANVAS element is required in HTML, and canvas is operated in Javascript.
1. Draw a background image for the canvas.
2. In a circle with a painting radius of 0-10 PX, the x coordinate screen is horizontally random. The vertical position of y is greater than the screen height.
The circle background color can be random, that is, various colors!
Use a timer to control y --

Construct html

  
  
  
  
  
  More than 5 small balls move up     
    
    
 

Js Code

Script var canvas = document. getElementById ("canvas"); var context = canvas. getContext ("2d"); canvas. width = window. innerWidth; canvas. height = window. innerHeight; function Circle () {this. x = Math. random () * canvas. width; this. y = canvas. height; this. r = Math. random () * 10; // draw the circle this. paint = function () {context. beginPath (); context. arc (this. x, this. y, this. r, 0, Math. PI * 2); context. fillStyle = "white"; context. globalalkaline Ha = 0.5; context. fill ();} // controls the circular movement this. step = function () {this. y -- ;}} var circles = []; function createCircles () {var circle = new Circle ();//?????? Circles [circles. length] = circle;} function paintCircles () {for (var I = 0; I
 
  

  
You need to add romantic elements to your website. This is a good method. I hope you can use javascript to implement the special effects of bubbles. Thank you for reading this article.