原生js+canvas实现下雪效果

时间：2021-05-25

本文实例为大家分享了js+canvas实现下雪效果的具体代码，供大家参考，具体内容如下

效果展示：

源码展示:

<!doctype html><html><head> <meta charset="utf-8"> <title>canvas下雪效果(原生js)</title> <style> * { margin: 0; padding: 0 } html, body { width: 100%; height: 100%; overflow: hidden; background-color: #222; } #canvas { position: absolute; top: 0; left: 0; } </style></head><body><canvas id="canvas"></canvas><img id="imgSnow" width="0" height="0" src="xh.png" alt="雪花"><img id="bgSnow" width="100%" height="100%" src="bj.jpg" alt="背景"> <script> window.onload = function () { var canvas = document.getElementById("canvas"); var imgSnow = document.getElementById("imgSnow"); var bgSnow = document.getElementById("bgSnow"); var ctx = canvas.getContext('2d'); var mbody = document.querySelector("body"); canvas.width =mbody.offsetWidth; canvas.height = mbody.offsetHeight; var GetRandomNum = function (Min, Max) { var Range = Max - Min; var Rand = Math.random(); return (Min + Math.round(Rand * Range)); } // console.log(GetRandomNum(0, canvas.width)) var snowArray = {}; //雪花对象 var snowIndex = 0; //标识符 var setting = { num: 30, //数量 snowSize: 20, //大小 startX: Math.random() * canvas.width, //起始横坐标 startY: 0, //起始纵坐标 vy: 0.01 } function snow() { // 起始横坐标 this.x = Math.random() * canvas.width; // 起始纵坐标 this.y = setting.startY; this.size = setting.snowSize + Math.random() * 10 - 10; //横坐标偏移量 this.vx = Math.random() * 3 - 2; //偏移量 //纵坐标偏移量 this.vy = Math.random() * 10; this.life = 0; this.maxLife = 100; this.id = snowIndex; //当前信息保存至对象snowArray snowArray[snowIndex] = this; snowIndex++; } snow.prototype.draw = function () { this.x += this.vx; this.y += this.vy; this.vy += setting.vy; this.life++; //删除 if (this.y > canvas.height * 0.9 - 20) { snowArray[this.id] } else if (this.life >= this.maxLife) { snowArray[this.id] } ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size) } setInterval(function () { ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height); //数 for (var i = 0; i < setting.num; i++) { if (Math.random() > 0.97) { new snow(); } } for (var i in snowArray) { snowArray[i].draw(); } }, 100)202082104246954 }</script> </body></html>

图片：

雪花：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章