结合canvas做雨滴特效
雨滴特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>汇制雨滴</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
/*vertical-align: middle;*/
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持画布，请您更换浏览器</canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
//设置2d绘图
var ctx = can.getContext('2d')
//获取浏览器窗口的宽高
var w = can.width = window.innerWidth;
var h = can.height = window.innerHeight;
//自适应浏览器宽高
window.onresize = function(){
w = can.width = window.innerWidth;
h = can.height = window.innerHeight;
}
//canvas绘制矩形
//设置矩形框的路径
//ctx.rect(x,y,w,h); //xy 坐标 wh宽高
//画出来
//ctx.fill(); //填充方法
//stx.stroke(); //触笔方法 空心的
// ctx.fillStyle = 'red';
// ctx.fillRect(100,100,100,100)
// //绘制圆形
// ctx.arc(250,250,50,0,Math.PI*2,false)
// ctx.strokeStyle = 'red';
// ctx.stroke();
//运动
// var y = 0;
// setInterval(function(){
// y++;
// //先清空再绘制
// ctx.clearRect(0,0,w,h);
// ctx.fillRect(100,y,100,100)
// },30)
//雨滴特效
function Drop(){ //创建雨滴类
}
//原型
Drop.prototype ={
//初始化
init:function(){
this.x = rand(0,w);//雨滴的初始X坐标
this.y = 0;//雨滴的初始Y坐标
this.vy = rand(4,5) //雨滴下落的速度
this.l = rand(0.8*h,0.9*h);//雨滴下落的最大高度
this.r = 1;//初始半径
this.vr = 1; //半径增大的速度
this.a = 1; //初始透明度
this.va = 0.9; //透明度变化系数
},
//绘制
draw:function(){
if (this.y>this.l) {
ctx.beginPath() //开始路径
//绘制波纹(圆形)
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)
ctx.strokeStyle = 'rgba(0,255,255,'+ this.a + ')';
ctx.stroke();
}else{
//绘制下落的雨滴
//ctx.clearRect(0,0,w,h);
ctx.fillStyle = 'rgba(0,255,255,1)'
ctx.fillRect(this.x,this.y,2,10);
}
this.update();
},
//更新坐标
update:function(){
//当y坐标小于1高度的时候就一直累加
if (this.y<this.l) {
this.y += this.vy;
}else{
//圆形半径增大
// if (this.r<50) {
// this.r += this.vr;
// }else{
//
// }
//判断透明度
if (this.a>0.03) {
this.r += this.vr;
if (this.r > 50) {
this.a *= this.va;
}
}else{
//重新初始化了
this.init()
}
}
// this.y += this.vy;
}
}
//实例化雨滴对象
// var drop = new Drop();
// drop.init();
var drops = [];
for (var i=0; i<30; i++) {
setTimeout(function(){
var drop = new Drop();
drop.init();
drops.push(drop);
},i*200)
}
setInterval(function(){
//绘制一个透明层
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0,0,w,h)
for (var i=0; i<drops.length; i++) {
drops[i].draw()
}
// drop.draw()
},1000/60); //帧数
function rand(min,max){
return Math.random()*(max-min) +min;//min~MAX
}
</script>
</html>
结合canvas做雨滴特效的更多相关文章
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- href 做导航 特效
<div> <div> <%for (int i = 0; i < 200; i++) { %><%=i.ToString() %> <br ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
- 用Canvas做动画
之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...
- canvas之背景特效
需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...
- 我们能用canvas做什么？
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- html5 canvas做的图表插件
用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...
- canvas做动画
一.绘制图片 ①加载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- CANVAS模仿龙卷风特效
大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...
随机推荐
- web开发之php--- mvc 模式
http://www.cnblogs.com/archy_yu/p/4229929.html
- Ubuntu下MongoDB的安装和使用
本博文介绍了MongoDB,并详细指引读者在Ubuntu下MongoDB的安装和使用.本教程在Ubuntu14.04下测试通过.(2017.09.07) 安装MongoDB MongoDB安装很简单, ...
- DHCP动态主机配置协议
1.DHCP简述 某组织一旦获得了一个地址,它就可以为本组织内的主机与路由器接口逐个分配IP地址.系统管理通常可以手工配置路由器中的IP地址(静态分配).但这项任务目前通常更多是使用动态主机配置协议( ...
- 复制对象（一）copy和mutableCopy方法
本文转载至 http://www.tuicool.com/articles/Fn6rMn CSDN博客原文 http://blog.csdn.net/u010962810/article/detai ...
- activity通过流程实例id动态获取流程图并展示在jsp页面上
提供的Service方法如下: Java /** * 获取当前任务流程图 * * @param processInstanceId * @return */ @Override public Inpu ...
- 位运算+引用+const+new/delete+内联函数、函数重载、函数缺省参数
update 2014-05-17 一.位运算 应用: 1.判断某一位是否为1 2.只改变其中某一位,而保持其它位都不变 位运算操作: 1.& 按位与(双目): 将某变量中的某些位(与0位与) ...
- JQuery处理DOM元素
现有一个id为txtMyTest的元素 获取属性值 $('#id').attr('属性名'); 设置属性值 $('#id').attr('属性名','需要设置的值'); 设置多个属性 如下同时设置va ...
- Jquery来对form表单提交（mvc方案）
来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...
- Error: member names cannot be the same as their enclosing type
在编译的时候会遇到如下问题:member names cannot be the same as their enclosing type 原因:方法名和类名不能一样,如果一样就是一个构造函数.而构造 ...
- [JavaScript] this、call和apply详解
在JavaScript编程中,理解this.call和apply是道槛,如果能正确的理解它们的本质及其应用.那么在以后的JavaScript中会得心应手. this 跟别的语言大相径庭的是,JavaS ...