Canvas achieves random dynamic falling effect of snowflakes (code example)-JS Tutorial-php.cn

Canvas achieves random dynamic falling effect of snowflakes (code example)

青灯夜游

Release： 2020-06-17 10:24:13

forward

2935 people have browsed it

This article will introduce to you how to use canvas to achieve the random and dynamic falling effect of snowflakes. The sample code in the article is introduced in great detail. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Canvas achieves random dynamic falling effect of snowflakes (code example)

Use canvas to realize random and dynamic falling of snowflakes. The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    margin: 0;
    padding: 0;
  }
  canvas{
    background: #000;
  }
</style>
<body>
  <canvas id = "snow">

  </canvas>
  <script>
    var canvas = document.getElementById(&#39;snow&#39;);
    var context = canvas.getContext(&#39;2d&#39;);
    // 获得可视区的宽高
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    function snow(){
      context.save();
      // 开启路径
      context.beginPath();
      // 移动画布，确定雪花终点为中心点
      context.translate(100,100);
      //起点
      context.moveTo(-20,0);
      // 终点
      context.lineTo(20,0);
      // 线变成白色
      context.strokeStyle = &#39;#fff&#39;;
      // 线变粗
      context.lineWidth = 10;
      // 线变圆头
      context.lineCap = &#39;round&#39;;
      context.stroke();
      // 角度转弧度
      var disX = Math.sin(30*Math.PI/180)*20;
      var disY = Math.sin(60*Math.PI/180)*20;
      // 画第二条线，左下到右上的线
      context.moveTo(-disX,disY);
      context.lineTo(disX,-disY);
      // 画第三条线
      context.moveTo(-disX,-disY);
      context.lineTo(disX,disY);
      context.stroke();
      context.restore();
    }
    // snow();
    //生成雪花的构造函数
    function Snow(x,y,scale,rotate,speedX,speedY,speedR){
           this.x = x;
           this.y = y;
           this.scale = scale;
           this.rotate = rotate;
           this.speedX = speedX;
           this.speedY = speedY;
           this.speedR = speedR;
          // 渲染雪花
          this.render = function(){
            context.save();
            context.beginPath();
            context.translate(this.x,this.y);
            context.scale(this.scale,this.scale);
            context.rotate(this.rotate*Math.PI/180);
            context.moveTo(-20,0);
            context.lineTo(20,0);
            context.strokeStyle = &#39;#fff&#39;;
            context.lineWidth = 10;
            context.lineCap = &#39;round&#39;;
            context.stroke();
            var disX = Math.sin(30*Math.PI/180)*20;
            var disY = Math.sin(60*Math.PI/180)*20;
            context.moveTo(-disX,disY);
            context.lineTo(disX,-disY);
            context.moveTo(-disX,-disY);
            context.lineTo(disX,disY);
            context.stroke();
            context.restore();

          }

    }
    // var snow = new Snow(50,50,1,10,10,10,10);
    // snow.render();
    // 存储所有生成的雪花
    var snowArray = [];
    // 生成雪花
      function init(){
        var len = 100;
        for(var i = 0;i<len;i++){
          var x = Math.random()*canvas.width;
          var scale = Math.random()+0.5;
          var rotate = Math.random()*60;
          var speedX = Math.random()+1
          var speedY = Math.random()+5;
          var speedR = Math.random()*4+2;
          // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);
          // snow.render();
          (function(x,y,scale,rotate,speedX,speedY,speedR){
            setTimeout(function(){
            var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);
            snow.render();
            snowArray.push(snow);
          },Math.random()*8000);   
          })(x,0,scale,rotate,speedX,speedY,speedR);
      }snowing();
    }init();
      // 动起来
      function snowing(){
        setInterval(function(){
          //先清除
          context.clearRect(0,0,canvas.width,canvas.height);
          for(var i = 0;i < snowArray.length;i++){
            snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width;
            snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height;
            snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60;
            snowArray[i].render();
          }
        },30);
      }
    
    /**
     * sin60 = 对边/斜边 =>  对边 = sin60*斜边  =>  y=sin60*半径（r）；
     */
  </script>
</body>
</html>

Copy after login

Dynamic renderings:

Canvas achieves random dynamic falling effect of snowflakes (code example)

For more cool CSS3, HTML5, jQuery, and Javascript special effects, it is recommended to visit: js Special Effects Network!

The above is the detailed content of Canvas achieves random dynamic falling effect of snowflakes (code example). For more information, please follow other related articles on the PHP Chinese website!