原生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 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, 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>
图片：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS+Canvas 实现下雨下雪效果
最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
-
javascript实现下雪效果【实例代码】
原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin
-
js特效,页面下雪的小例子
复制代码 代码如下: if (arr[i]){ var ofs=$(this).offset(); var x=parseInt(ofs.left); var y =parseInt(ofs.top); var vy=parseInt($(this).attr("vy")); x +=wind; vy *=
-
下雪了 javascript实现雪花飞舞
本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下 原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 效果预览:http://wjf444128852.github.io/demo02/snow/index.html HTML代码: <!DOCTYPE html> <html lang="en&qu
-
原生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%;
-
使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂懂,到现在学着开始写github.写博客,其实技术上没有太多可写的,毕竟自己也才刚刚入门,只能说是按照自己的兴趣,写点有意思的小项目,项目上存在的问题,也希望大神能够予以指正,目前这个demo的功能已经实现,后期我会对样式.代码等方面进行优化. 项目运行效果: 项目简介:使用原生js+canvas制
-
原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
-
原生JS实现轮播效果+学前端的感受(防止走火入魔)
插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么
-
js+canvas实现转盘效果（两个版本）
本文实例为大家分享了js+canvas实现转盘效果的具体代码,供大家参考,具体内容如下 用到了canvas的绘制,旋转,重绘操作,定时器,文本,平移,线条,圆,清理画布等等: 版本一 不可以点击,刷新旋转 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>转盘抽奖</title> <style type="text/css&quo
-
原生js实现波浪导航效果
本文实例为大家分享了原生js实现波浪导航效果的具体代码,供大家参考,具体内容如下 展示效果: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js波浪导航</title> <style> * {undefined margin:0; padding:0; font-family:"微软
-
原生js canvas实现鼠标跟随效果
本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas鼠标跟随效果(原生js实现)</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *
-
原生JS实现简单放大镜效果
本文实例为大家分享了原生JS实现放大镜效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } img{ vertical-align: top; } .fdj { width: 350px; heig
-
js canvas实现橡皮擦效果
本文实例为大家分享了canvas实现橡皮擦效果的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <meta name="viewport" content="in