English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Core Code Sharing of Canvas Snowflake Effect

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.)