效果展示：

源码展示:

<!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)相关推荐

html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
圆盘时钟效果原生JS
圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟,设计的同款时钟效果实现效果实现原理数字时钟利用Date内置对象获取当下的时间,通过处理呈现在页面上这一步获取时间是非常简单的,通过Da ...
手风琴效果——原生JS
写在前面作为一只前端小汪,以自己一个初学者的视角,在这里记录自己在学习过程中遇到的问题,解决的方法,也算是成长的历程吧!过程中难免会有疏忽和自己没有发现的错误,如果你碰巧看到了我的博客,欢迎和我一起 ...
php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点实现原理: 1.点击楼层跳相应楼层,用的是锚点定位电梯:2F 个护家清列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示我们的脚本主要就是实现这个功能. ...
Canvas星空效果（JS面向对象）
概述更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 ...
js实现html图片翻页效果,原生JS实现图片翻书效果
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; L ...
html5做出百叶窗效果,原生js实现百叶窗效果及原理介绍
百叶窗大家都见过吧!如图: 原理: 如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden:黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
20多行js实现canvas雪夜下雪效果
目录前言实现canvas雪夜下雪效果 1.设置canvas标签的id为cvs,设置背景颜色为黑色 2.设置body外边距为0 3.通过获取DOM元素获得画板 4.指定二维绘图 5.设置宽高填满页面 ...

canvas下雪效果(原生js)

效果展示：

源码展示:

canvas下雪效果(原生js)相关推荐

最新文章

热门文章