帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» canvas雪花满天飞效果
canvas雪花满天飞效果
浏览:1271次
-
评论:1次
-
发布时间:2017-12-22
Html
Css
Js
/*snow*/ body { background:#000; } canvas { display:block; width:100%; height:100%; top:0; left:0; position:fixed; } canvas.flare { opacity:0.5; }
! function(e) { var t = { speed: 0, interaction: true, size: 2, count: 200, opacity: 1, color: "#ffffff", windPower: 0, image: false }; e.fn.let_it_snow = function(n) { function c() { u.clearRect(0, 0, o.width, o.height); for (var t = 0; t < a; t++) { var n = s[t], i = f, p = l, d = 100, v = n.x, m = n.y; var g = Math.sqrt((v - i) * (v - i) + (m - p) * (m - p)), y = v - i, b = m - p; if (g < d) { var w = d / (g * g), E = (i - v) / g, S = (p - m) / g, x = w / 2; n.velX -= x * E; n.velY -= x * S } else { n.velX *= .98; if (n.velY <= n.speed) { n.velY = n.speed } switch (r.windPower) { case false: n.velX += Math.cos(n.step += .05) * n.stepSize; break; case 0: n.velX += Math.cos(n.step += .05) * n.stepSize; break; default: n.velX += .01 + r.windPower / 100 } } var T = r.color; var N = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/; var C = N.exec(T); var k = parseInt(C[1], 16) + "," + parseInt(C[2], 16) + "," + parseInt(C[3], 16); n.y += n.velY; n.x += n.velX; if (n.y >= o.height || n.y <= 0) { h(n) } if (n.x >= o.width || n.x <= 0) { h(n) } if (r.image == false) { u.fillStyle = "rgba(" + k + "," + n.opacity + ")"; u.beginPath(); u.arc(n.x, n.y, n.size, 0, Math.PI * 2); u.fill() } else { u.drawImage(e("img#lis_flake").get(0), n.x, n.y, n.size * 2, n.size * 2) } } requestAnimationFrame(c) } function h(e) { if (r.windPower == false || r.windPower == 0) { e.x = Math.floor(Math.random() * o.width); e.y = 0 } else { if (r.windPower > 0) { var t = Array(Math.floor(Math.random() * o.width), 0); var n = Array(0, Math.floor(Math.random() * o.height)); var i = Array(t, n); var s = i[Math.floor(Math.random() * i.length)]; e.x = s[0]; e.y = s[1] } else { var t = Array(Math.floor(Math.random() * o.width), 0); var n = Array(o.width, Math.floor(Math.random() * o.height)); var i = Array(t, n); var s = i[Math.floor(Math.random() * i.length)]; e.x = s[0]; e.y = s[1] } } e.size = Math.random() * 3 + r.size; e.speed = Math.random() * 1 + r.speed; e.velY = e.speed; e.velX = 0; e.opacity = Math.random() * .8 + r.opacity } function p() { for (var e = 0; e < a; e++) { var t = Math.floor(Math.random() * o.width), n = Math.floor(Math.random() * o.height), i = Math.random() * 3 + r.size, u = Math.random() * 1 + r.speed, f = Math.random() * .5 + r.opacity; s.push({ speed: u, velY: u, velX: 0, x: t, y: n, size: i, stepSize: Math.random() / 30, step: 0, angle: 180, opacity: f }) } c() } var r = e.extend({}, t, n), i = e(this), s = [], o = i.get(0), u = o.getContext("2d"), a = r.count, f = -100, l = -100; o.width = window.innerWidth; o.height = window.innerHeight; (function() { var e = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(e) { window.setTimeout(e, 1e3 / 60) }; window.requestAnimationFrame = e })(); if (r.image != false) { e("
").prependTo("body") } p(); e(window).resize(function() { if (this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { el2 = i.clone(); el2.insertAfter(i); i.remove(); el2.let_it_snow(r) }, 200) }); if (r.interaction == true) { o.addEventListener("mousemove", function(e) { f = e.clientX, l = e.clientY }) } } }(window.jQuery) $(document).ready(function() { $("canvas.flare").let_it_snow({ windPower: 0, speed: 0, color: "#392F52", size: 0, opacity: 0.00000001, count: 0, interaction: false }); $("canvas.snow").let_it_snow({ windPower: 3, speed: 1, count: 100, size: 0 }); $("canvas.flake").let_it_snow({ windPower: -3, speed: 1, count: 0, size: 10, image: "" }); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.1
<!doctype html><html><head><meta charset="utf-8"><title>canvas雪花满天飞效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:canvas雪花特效
HTML5手机web页面底部菜单
弹幕效果实现方式
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2017年12月23日
感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1271
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值