This shows the white translucent bubbles such as: actually dynamic
Idea: HTML only needs a canvas element, JavaScript operation Canvas
1. Draw a background image to canvas
2, in the drawing radius of 0-10px Circle, x-coordinate screen horizontal random, y is marked vertically larger than the screen height.
The round background color can be random. That's all the colors!
Using Timers to control y--
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8"> <Metaname= "Generator"content= "editplus®"> <Metaname= "Author"content=""> <Metaname= "Keywords"content=""> <Metaname= "Description"content=""> <title>More than 5 small balls move Up</title> <style> </style> </Head> <Body> <DivID= "D1"> <CanvasID= "Canvas"></Canvas> </Div> </Body></HTML>
<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 round this.paint=function () { Context.beginpath (); Context.arc (this.x,this.y,this.r,0,math.pi*2); context.fillstyle= "White"; Context.globalalpha = 0.5;context.fill ();} Control circular Move 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>
Multiple bubbles popping up!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
