Canvas流星雨特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas流星雨特效</canvas></title>
<style>
*{margin: 0; padding: 0;}
#canvas
{
background: #000;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器版本过低，请更换浏览器！</canvas>
<script>
var can=document.getElementById('canvas');
var ctx=can.getContext('2d');
var w=can.width=window.innerWidth;
var h=can.height=window.innerHeight;
var count=30;
var drops=[];
window.οnresize=function()
{
w=can.width=window.innerWidth;
h=can.height=window.innerHeight;
};
function Drop(){}
Drop.prototype={
init: function()
{
this.x=random(0,w);
this.y=0;
this.r=1;
this.color='#0ff';
this.vy=random(4,5);
this.vr=1;
this.a=1;
this.va=0.96;
this.l=random(h*0.8,h*0.9);
},
draw:function()
{
if(this.y>this.l)
{
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);
ctx.strokeStyle='rgba(0,255,255,'+this.a+')';
ctx.stroke();
}
else
{
ctx.fillStyle=color(this.a);
ctx.fillRect(this.x,this.y,2,10);
}
this.update();
},
update: function()
{
if(this.y<this.l)
{
this.y+=this.vy;
}
else
{
if(this.a>0.03)
{
this.r+=this.vr;
if(this.r>50)
{
this.a*=this.va;
}
}
else
{
this.init();
}
}
}
}
function move()
{
ctx.fillStyle='rgba(0,0,0,.1)';
ctx.fillRect(0,0,w,h);
for(var i=0;i<drops.length;i++)
{
drops[i].draw();
}
requestAnimationFrame(move);
};
function setup()
{
for(var i=0;i<count;i++)
{
(function(j)
{
setTimeout(function(){
var drop=new Drop();
drop.init();
drops.push(drop);
},j*200);
}(i))
}
};
setup();
move();
function random(min,max)
{
return Math.random()*(max-min)+min;
};
function color(a)
{
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
return 'rgba('+r+','+g+','+b+','+a+')';
};
</script>
</body>
</html>
Canvas流星雨特效相关推荐
- H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示 代码展示 body代码 <!DOCTYPE html> <html lang="e ...
- 金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码
一年一次的高考是人生的第一个重要转折点,如果能重来一起进入时光机,高考前一天小编随便做了一个测一测命中注定大学的小小游戏.(vue前端小游戏,canvas动画) 效果图 源代码 1.html代码 &l ...
- Html5 canvas创意特效合集
Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画.本文就是收集了很多非常富有创意的一些canvas动画特效例子,这些例子都非常适合大家学习. 1.3D篝火动画 ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- 9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- Python实现流星雨特效代码示例
本文讲述了Python代码示例:实现流星雨特效!具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,具体如下: 我们先给大家讲个小故事,提一下你们的兴趣:然后我给出论据,得出结论.最后再把 ...
- 字 掉落 炫酷 网站_16个富有创意的HTML5 Canvas动画特效集合
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas高空瀑布下落湖面动画 HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情.今天要分享 ...
- html5星星效果图,H5 canvas流星雨星星特效
/p> 一起来看流星雨 var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var ...
- canvas 实现流星雨特效
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
最新文章
- linux error errno 错误对照
- Apache PHP-fpm Mariadb
- Clojure 学习
- 在linux的weblogic上增加启动参数
- jdk的安装与环境变量的配置
- Oracle的Net Configuration Assistant 配置
- 价钱转换python_如何在python中转换货币？
- bzoj 4002: [JLOI2015]有意义的字符串（特征根法+矩阵快速幂）
- 性能测试--jmeter响应数据中文乱码【12】
- macOS开机启动项设置
- （java毕业设计）基于jsp旅游网站管理系统源码
- Ubuntu下VSCode使用等宽字体设置
- Insecure CAPTCHA（不安全的验证码）
- opencv convertTo函数
- SDKMAN 安装过程
- JavaScript关于exec（）函数的理解
- docker学习——tmpfs mounts
- 存量设备通过DTU进入阿里云IoT平台
- 怎么快速生成gif动图？三步完成gif合成
- 强化学习笔记：多臂老虎机问题(7)--Gradient Bandit Algorithm