怕你不信，100行极简原生html现实3D雪花飘飘动效

纯原生JS结合HTML5 Canvas实现逼真的大雪纷飞效果。

用到的snow_1.png是一张很小的雪花图片，通过如下js代码在canvas里面画出来，右键保存备用。

function drawPic() {canvas.width = 20;canvas.height = 20;var grd = context.createRadialGradient(10, 10, 1, 10, 10, 10);grd.addColorStop(0, 'white');grd.addColorStop(1, 'rgba(255,255,255,0)');context.fillStyle = grd;context.fillRect(0, 0, canvas.width, canvas.height);
}

背景图是在百度图片随便下载了一张雪地图片：

100行完整html代码:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>大雪纷飞</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><style>html,body{height: 100%;margin: 0;padding: 0;}body{background: url("images/bg.jpg") no-repeat center center;background-size: cover;}</style>
</head>
<body>
<canvas id="main"></canvas>
</body>
<script>window.onload = function(){var canvas = document.getElementById("main");canvas.width = window.innerWidth;canvas.height = window.innerHeight;var context = canvas.getContext('2d');document.body.appendChild(canvas);var snowNum = 2000;var particles = [];var snowImg = new Image();snowImg.src = "images/snow_1.png";snowImg.onload = function() {init();}var groundStart = window.innerHeight*0.6;function Particle3D() {this.x = Math.random() * 2000 - 1000;this.y = Math.random() * 2000 - 1000;this.z = Math.random() * 1000 - 1000;this.vx = Math.random()*1-1;this.vy = Math.random()*1+1;this.vz = Math.random()*1-2;this.width = snowImg.width;this.height = snowImg.height;this.scale = (this.z + 1000)/2000;this.max = groundStart + window.innerHeight*this.scale;this.update = function() {this.x += this.vx;this.y += this.vy;this.z += this.vz;this.scale = (this.z + 1000)/2000;this.max = groundStart + window.innerHeight*this.scale;}this.draw = function(ctx) {var centerX= this.x+this.width/2;var centerY= this.y+this.height/2;var width = this.width*this.scale;var height = width;//this.height*this.scale;var x = centerX - width/2;var y = centerY - height/2;if(width>=1) {ctx.drawImage(snowImg,x,y,width,height);}}}function init() {for(var i=0;i<snowNum;i++) {var dot = new Particle3D();particles.push(dot);dot.draw(context);}requestAnimationFrame(loop);}function loop() {context.clearRect(0,0,canvas.width,canvas.height);for (var i = 0; i < particles.length; i++) {var dot = particles[i];dot.update();with (dot) {if (y >=dot.max) {y -= 2000}if (x > 1000) {x -= 2000} else if (x < -1000) {x += 2000}if (z < -1000) {z += 1000}}dot.draw(context);}requestAnimationFrame(loop);}};
</script>
</html>

1 需要注意的是，需要设定Canvas的大小，否则默宽高是300x150。不能简单地给canvas标签指定style="width:100%;height:100%",那样的话canvas会由300x150的尺寸强制拉伸到screenWidth*screenHeight。
2 代码尽可能原始而简单，有几个地方代码可以优化，但效果已经实现了。另外雪花在飘下过程中近大远小的模拟也有其他更复杂的模型。
欢迎转载，欢迎copy，欢迎留言交流~~~

怕你不信，100行极简原生html现实3D雪花飘飘动效相关推荐

csvtk：高效命令行版极简dplyr
写在前面什么时候写 csvtk 呀,csvtk 也借鉴了些 datamash 的东西. 之前写 datamash 的使用教程 linux 极简统计分析工具 datamash 必看教程,收到了一位读者 ...
极简轻奢全屋定制样板7天被打卡了100遍，栓Q了
极简轻奢全屋定制样板7天被打卡了100遍,栓Q了作全屋定制,怕价格高?怕被坑?还是怕翻车?到底怎样才算一款好定制呢? 这是一个长沙北辰三角洲朋友带来的.刚刚装修完工,就迫不及待的拍上美照分享了.既好 ...
l1-039 古风排版 20分极简七行逻辑代码版
7-6 古风排版 (20分) 中国的古人写文字,是从右向左竖向排版的.本题就请你编写程序,把一段文字按古风排版. 输入格式: 输入在第一行给出一个正整数N(<100),是每一列的字符数.第二行给 ...
100行代码让您学会JavaScript原生的Proxy设计模式
面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了. 其实和Java一样,JavaScript从语言层面来讲,也提供了对代理这个设计模式的原生支持.我们用一个不到100行代码的 ...
云原生时代，青云QingCloud的“极简”之道
科技云报道原创. 容器带来的巨大优势,甚至可能取代已有的云计算技术,其潜力让市场兴奋不已.然而,容器技术学习曲线陡峭,企业微服务实践进阶之路充满荆棘,高门槛的容器该如何在企业中平稳落地? 如同10 ...
python每行输出5个怎么输入,Python 极简教程（五）输入输出
输入函数,用于接收键盘输入.主要用于在学习和练习过程中,增加练习的乐趣.让我们的程序相对完整和具备简单的交互能力. 输出函数,将代码运行结果打印在控制台上,同样也能让我们观察程序运行的结果.也是为了增 ...
Kotlin极简教程：第4章基本数据类型与类型系统
原文链接:https://github.com/EasyKotlin 到目前为止,我们已经了解了Kotlin的基本符号以及基础语法.我们可以看出,使用Kotlin写的代码更简洁.可读性更好.更富有生产 ...
《Kotin 极简教程》第8章函数式编程（FP）(1)
第8章函数式编程(FP) <Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读点击这里 > 去天猫商城购买阅读非常感谢您亲爱的读者,大家请多支持!!!有任 ...
【编程实践】Google Guava 极简教程
前言 Guava 工程包含了若干被 Google 的 Java 项目广泛依赖的核心库,我们希望通过此文档为 Guava 中最流行和最强大的功能,提供更具可读性和解释性的说明. 适用人群本教程是基础 ...

怕你不信，100行极简原生html现实3D雪花飘飘动效

怕你不信，100行极简原生html现实3D雪花飘飘动效相关推荐

最新文章

热门文章