雪花效果，使用画布

PROMULGATOR

2877229176

广东省东莞市

← 自动切换图片

→ 简易tab切换

相关代码

雪花效果，使用画布

jquery实现全屏雪花飘落

html圆形雪花动画

模仿雪花飞舞

纯原生js下雪

飘落的树叶

Html

Css

Js

* {
	margin:0;
	padding:0;
}
html,body {
	background:#081d4d;
}
#vas {
	position:absolute;
	vertical-align:top;
	z-index:1000; 
	pointer-events:none;
}

(function() {
      var can = document.getElementById("vas");
      var widths = document.documentElement.clientWidth || document.body.clientWidth;
      var heights = document.documentElement.clientHeight || document.body.clientHeight;
      can.width = widths;
      can.height = heights;
      var conm = 1000;
      var ctx = can.getContext("2d");
      ctx.fillStyle = "#fff";
      var Snowflake = function() {
          this.x = 0;
          this.y = 0;
          this.vy = 0;
          this.vx = 0;
          this.r = 0;
          this.reset();
      };
      Snowflake.prototype.reset = function() {
          this.x = Math.random() * widths;
          this.y = Math.random() * -heights;
          this.vy = 1 + Math.random() * 3;
          this.vx = 0.5 - Math.random();
          this.r = 1 + Math.random() * 2;
          this.o = 0.5 + Math.random() * 0.5;
      };
      var snowflakes = [],
          snowflake;
      for (i = 0; i < conm; i++) {
          snowflake = new Snowflake();
          snowflakes.push(snowflake);
      }
      setInterval(function() {
          ctx.clearRect(0, 0, widths, heights);
          for (i = 0; i < conm; i++) {
              snowflake = snowflakes[i];
              snowflake.y += snowflake.vy;
              snowflake.x += snowflake.vx;
              ctx.globalAlpha = snowflake.o;
              ctx.beginPath();
              ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2);
              ctx.closePath();
              ctx.fill();
              if (snowflake.y > heights) {
                  snowflake.reset();
              }
          }
      }, 15);
  }());

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

雪花效果，使用画布



代码描述：原生js写的雪花效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>雪花效果，使用画布-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号