原生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='http://m.b3g6.com/bcjs/xh.png' alt='雪花'><img src='http://m.b3g6.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>
圖片：
雪花：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備