Javascript has a very romantic bubble, and javascript has a very romantic effect.

Javascript has a very romantic bubble, and javascript has a very romantic effect.

The example in this article describes the special effect code for javascript to implement romantic bubbles. 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

<! Doctype html> 
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 <circles. length; I ++) {circles [I]. paint () ;}} function stepCircles () {for (var I = 0; I <circles. length; I ++) {circles [I]. step () ;}} var myimg = new Image (); myimg. src = "images/demo-1.png"; var timer = ""; setInterval (function () {context. drawImage (myimg, 0, 0); timer ++; if (timer % 20 = 0) {createCircles () ;}paintcircles (); stepCircles () ;}, 10 ); </script>
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.