canvas下雪效果(原生js)
生活随笔
收集整理的這篇文章主要介紹了
canvas下雪效果(原生js)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果展示：
源碼展示:
<!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;//當前信息保存至對象snowArraysnowArray[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)} </script></body> </html>圖片：
背景圖鏈接：https://img-blog.csdnimg.cn/20190301150524864.jpg
雪花圖鏈接：https://img-blog.csdnimg.cn/20190301150602275.png
總結
以上是生活随笔為你收集整理的canvas下雪效果(原生js)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 干货 | DDD实战：基于洋葱模型的分层
- 下一篇： Git上修改分支名称