原生js+canvas實現下雪效果
阿新 • • 發佈:2020-08-03
本文例項為大家分享了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,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>
圖片:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。