Home > Developer > JavaScript
The snow animation effect is implemented using canvas canvas in HTML5, which involves knowledge and computation of curve motion in physics.
Index.html
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><MetaContent="Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"Name="Viewport" ><MetaContent="Yes"Name="Apple-mobile-web-app-capable" ><MetaContent="Black"Name="Apple-mobile-web-app-status-bar-style" ><MetaContent="Telephone=no"Name="Format-detection" ><MetaContent="Email=no"Name="Format-detection" ><Title>snow</Title><LinkRel="Stylesheet"href="Css/main.css" ></Head><Body><CanvasId="Canvas" ></canvas> <script src=" js/snow.js "> </script> <script> Window.addeventlistener ( ' load ', function () {this.snow = new Snow (); //Initialize the Snow object and start the Snow animation Snow.init (). Start ();}); </script></ body></HTML> Main.css
HtmlBody{width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; background-color: #000; font-family: Microsoft Jas Black, Chinese fine black, blackbody; " Snow.js
(function(Exports, undefined) {' Use strict ';var document = Exports.document;functionSnow(){This.colors = [' #fff '];This.balls = [];This.winddirection =-1;This.ballradius =3;This.ballsperframe =2;This.timeinterval =40;This.winddirectionchangedinterval =5000;This.accumulativetime =0;ReturnThis }; Exports. Snow = snow; Snow.prototype = {init:function(args) {Forvar pIn args) {THIS[P] = args[p]; }This.canvas =This.canvas | | Document.queryselector (' #canvas ');This.context =This.context | |This.canvas.getContext (' 2d ');This.canvaswidth =This.canvaswidth | | Document.body.offsetWidth | | Document.body.clientWidth;This.canvasheight =This.canvasheight | | Document.body.offsetHeight | | Document.body.clientHeight;This.canvas.width =This.canvaswidth;This.canvas.height =This.canvasheight;ReturnThis }, Start:function(){This.timer =This.timer | | SetTimeout (This.frame.bind (This),This.timeinterval);ReturnThis }, Frame:function(){This.accumulativetime + =This.timeinterval; (This.accumulativetime%This.winddirectionchangedinterval <This.timeinterval) && (This.winddirection *=-1);This.render.call (this);This.update.call (this);This.timer =NullThis.timer = SetTimeout (This.frame.bind (This),This.timeinterval); }, UPDATE:function(){This.addBalls.call (this);This.updateBalls.call (this); }, Updateballs:function(){var balls =This.balls, Len = balls.length, i =0, cnt =0;for (; i<len;i++) {balls[i].x + = BALLS[I].VX *This.winddirection; Balls[i].y + = Balls[i].vy; Balls[i].vy + = BALLS[I].G * BALLS[I].T; balls[i].t + =This.timeinterval;if (BALLS[I].Y-This.ballradius <This.canvasheight) {balls[cnt++] = balls[i];}}while (len>cnt) {balls.pop (); len--;}}, Addballs:function(){var ball, i =0, Len =This.ballsperframe, _this =Thisfor (; i<len;i++) {ball = {x:Math.pow (-1,Math.ceil (Math.random () *1000)) *Math.floor (Math.random () * _this.canvaswidth *1.5), Y:Math.floor (Math.random () *This.ballradius) *-1, G:0.00005, VX:1 +Math.floor (Math.random () *2), VY:2 +Math.floor (Math.random () *5), T:0, Color: _this.colors[Math.floor (Math.random () * _this.colors.length)]}This.balls.push (ball); }}, Render:function(){var cxt =This.context, i =0, Len =This.balls.length; Cxt.clearrect (0,0,This.canvaswidth,This.canvasheight);for (; i<len;i++) {Cxt.fillstyle =This.balls[i].color; Cxt.beginpath (); Cxt.arc (This.balls[i].x,THIS.BALLS[I].Y,This.ballradius,0,2 *Math.PI,true); Cxt.closepath (); Cxt.fill (); }}, pause:function () {ClearTimeout (this.timer); this.timer = null;}, Resume: < Span class= "Hljs-keyword" >function () {this.start.call (this); }, clear: function () { Cleartimeout (this.timer); this.timer = null; this.context.clearrect (0, 0, Span class= "Hljs-keyword" >this.canvaswidth, this.canvasheight); }}) (window); Use JavaScript and canvas for snow-animated effects
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
