English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Without further ado, let's see the code:
var ca = document.getElementById("ca"); var ctx = ca.getContext('2d'); //Function to generate a random number between n and m function random(n,m){ return Math.floor(Math.random() * (m - n) + n); } //Function to convert degrees to radians function toRd(angle){ return angle * Math.PI / 180; } //Set variables to store the maximum width and height of the canvas var maxH = ca.height; var maxW = ca.width; //Unique properties of each snowflake //x, y coordinates, snowflake radius, angle, //Firstly generate100 snowflakes var snows = []; for(var i=0;i<200;i++{ snows.push({ "left": random(0, maxW), "top": random(0, maxH), "deg": random(-20, 20), //This is used to update the data "radius": random(2, 10) }); } //Apply these properties to each snowflake // for(var i=0;i<snows.length;i++) { // var r = snows[i].radius; // var x = snows[i].left; // var y = snows[i].top; // var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r); // ra.addColorStop(0, "rgba(2551)"; // ra.addColorStop(1, "rgba(255,0,0,0.1)"; // ctx.fillStyle = ra; // ctx.beginPath(); // ctx.arc(x, y, r, 0, 2 * Math.PI); // ctx.fill(); // } //If written like this above, there will be no animation effect //To achieve animation effects, each snowflake's characteristics must change //Set a timer to change the characteristics periodically var timer = setInterval(function () { snow(); //To achieve animation effects, first clear the canvas content ctx.clearRect(0, 0, maxW, maxH); //Each snowflake every16ms needs to change the characteristics of //x, y coordinates, this requires a new numerical value for calculation, and change their values //To avoid redefinition, use snows.radius to calculate directly for (var i = 0; i < snows.length; i++) { //At first, the x, y coordinates and radius r of each snowflake //Note that you cannot write it like this, the data of the following snowflakes will overwrite the previous ones, this bug took a long time to find // var r = snows[i].radius; // var x = snows[i].left; // var y = snows[i].top; // var d = snows[i].deg; //y change amount var yChange = 0.5 * snows[i].radius; //x change amount Here, the x change amount and y change amount can be associated with snows.deg, //So that each snowflake can follow its own trajectory, or it can be set separately, so that all snowflake trajectories are the same var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //The trigonometric formula here has been tested and tan is the most suitable snows[i].top += yChange; snows[i].left += xChange; //After the above steps, the x, y coordinates of each snowflake have changed, as time goes by, //All the snowflakes will float out of the canvas, and the snowflakes will eventually disappear. It is necessary to make a judgment and remove the snowflakes beyond the canvas from snows //Remove it first and then add a new snowflake, this step is done at the end, and only the judgment is done here if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) { //Here x<0 is because xChange may be negative if(i>0){ snows.splice(i--, 1); continue;//If it goes beyond the range // There is no need to render the snowflake further, so this judgment can reduce performance consumption } } //Start rendering var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius); ra.addColorStop(0, "rgba(255,255,255,1)"; ra.addColorStop(1, "rgba(255,255,255,0.1)"; ctx.fillStyle = ra; ctx.beginPath(); ctx.arc(snows[i].left, snows[i].top, snows[i].radius, 0, 2 * Math.PI); ctx.fill(); } }, 16); //Increase the number of snowflakes //It is to add members to the snows array function snow(){ if(snows.length<220) { var l = 220 - snows.length; for(var i=0;i<l;i++{ snows.push({ "left": random(0, maxW), "top": 0, "deg": random(-20, 20), //This is used to update the data "radius": random(2, 10) } } } }
That's all for this article. I hope the content of this article can bring you some help in learning or work, and I also hope to get more support for the Yelling Tutorial!
Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)