原生js+canvas实现下雪效果
本文实例为大家分享了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 src='https://www.haobala.com/bcjs/xh.png' alt='雪花'><img src='https://www.haobala.com/bcjs/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>
图片：
雪花：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备