源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="一起来看流星雨">
<meta name="description" content="流星雨效果">
<title>canvas雨滴</title>
<style>
body {
margin: 0
}

#rain {
display: block;
background: #33ffff;

/* width: 100%;
height: 100%; */
}
</style>
</head>
<body>
<canvas id="rain"></canvas>
<script>
// 1.1 设置canvas元素的宽高与浏览器一样
var can = document.getElementById("rain");
// 1.2 获取浏览器宽高
var w = window.innerWidth;
var h = window.innerHeight;
// 1.3 给canvas元素设置宽高
can.width = w
can.height = h
// 1.4 当窗口大小发生变化的时候自动再调整canvas的宽高
window.onresize = function() {
w = window.innerWidth
h = window.innerHeight
can.width = w
can.height = h
}
// 2 如何用canvas绘制图形 画布(卷轴 -> 宣纸)
var canContent = can.getContext("2d") //拿到画画的宣纸

function Rain() {} //生成雨滴的封装函数

//随机函数,生成x和y的坐标
function random(min, max) {
return Math.random() * (max - min) + min
}
Rain.prototype = {
init: function() {
this.x = random(0, w) //雨滴初始的x坐标
this.y = 0 //雨滴初始的y坐标
this.v = random(4, 5) //下落加速度
this.h = random(0.8 * h, 0.9 * h) //雨滴下落的地面
this.r = 1//初始半径
this.vr = random(0.4, 0.6) //半径增长率
this.a = 1//初始透明度
this.va = 0.96 // 透明度变化系数
},
draw: function() {
if (this.y < this.h) {
canContent.fillStyle = "#33ffff" //拿一只画实心图形的红色的笔
canContent.fillRect(this.x, this.y, 2, 10) // 画一个实心的矩形
} else {
canContent.strokeStyle = "rgba(51,255,255," + this.a + ")"
canContent.beginPath() //重新拿起笔
canContent.arc(this.x, this.y, this.r, 0, Math.PI * 2)
canContent.stroke();
}

},
move: function() {
if (this.y < this.h) {
this.y += this.v
} else {
if (this.a > 0.02) {
this.r += this.vr
if(this.r > 50){
this.a *= this.va
}
} else {
this.init()
}
}
this.draw()
}
}

//复用性
var rainArray = []

function createRain() {
var rain = new Rain()
rain.init() //基本配置
rain.draw()
rainArray.push(rain)
}
createRain()
for (var i = 0; i < 30; i++) {
setTimeout(createRain, 200 * i)
}

function moveRain() {
canContent.fillStyle = "rgba(0, 0, 0, 0.05)"
canContent.fillRect(0, 0, w, h)
for (var k = 0; k < rainArray.length; k++) {
rainArray[k].move();
}
}
function run(){
moveRain()
setTimeout(run, 100 / 60)
}
run()
// setInterval(moveRain, 1000 / 60) //所有的计算和渲染必须在16ms内完成
</script>
</body>
</html>

分析：

　　雨滴由rain函数创建，rain的原型上挂在的init、draw、move分别对应的是数据初始化、雨滴绘制、雨滴移动；

　　雨滴其实是一个小长方形，每次产生一个遮罩层和一个小长方形，那么之前的小长方形会逐渐倍淡化直到看不见，这就产生了视觉上的错觉，形成了小雨滴的形态

　　通过move反复改变小长方形的位置，并重新加遮罩层，并且绘制小长方形，就实现了下滴的感觉

　　快到底部时停止绘制小长方形，但是遮罩层依旧存在，开始绘制小圆，并且小圆半径逐渐扩大，实现雨滴扩散的效果，当小圆半径扩大到一定程度时开始让小圆逐渐变得透明直到消失

　

效果图：

　　

canvas绘制流星雨特效的更多相关文章

  1. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  2. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  3. canvas之背景特效

    需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...

  4. 结合canvas做雨滴特效

    雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  6. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. 你相信吗：一加仑汽油可以给iPhone充电20年

    一直以来,苹果公司的iPhone系列手机受到了全世界人民的喜欢,很多人就此成为了果粉.或许是由于我们过于在意iPhone系列手机出彩的外形,所以忽略了很多关于iPhone手机有意思的消息,我们今天就来 ...

  2. React.js/HTML5和iOS双向通信

    最近,我使用WKWebView和React.js进行双向通信,自己写了React.js嵌入到Native中. Native操作Web,通过两种方式传值 第一种,通过JS传值给Native 通过这种方式 ...

  3. Android--MediaPlayer(实现列表选歌，上一首，下一首，清空播放列表，搜索本地音乐文件)

    Android--MediaPlayer(实现列表选歌,上一首,下一首,清空播放列表,搜索本地音乐文件) 下载链接:http://download.csdn.net/detail/zlqqhs/507 ...

  4. 設定MacOS 終端機環境 (Homebrew/zsh/oh-my-zsh/iTerm2)

    安裝Homebrew 1 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/in ...

  5. 马云也看好！VR在2016年能否得到质变

    在2015年10月底有消息传出,国外虚拟现实公司Magic Lea的新一轮融资吸引到中国互联网巨鳄--阿里巴巴公司的关注.据透露,阿里巴巴极有可能为Magic Lea投资2亿美元.这虽然是阿里巴巴第一 ...

  6. JNI 问题 wrong ELF class

    使用JNI发现一个问题, wrong ELF class: ELFCLASS64)主要是机器是64位的OS,默认编译的.so是64位 而java设置的默认是32位 JDK, 所以会出现这个问题.那么就 ...

  7. Coding Interviews 20 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 思路 We need another data structure to sotre ...

  8. C++走向远洋——60（十四周阅读程序、STL中的简单容器和迭代器）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. Pandorabox固件路由器上申请Let's Encrypt证书，为内网里的多个web服务提供SSL支持

    对于家中宽带有公网IP的用户,有时我们需要将路由器内部网络的某些web服务通过端口转发暴露到外网(例如NAS远程访问),但HTTP是明文传输,有被监听的风险:如果在NAS上使用自签名证书,再端口转发, ...

  10. Asp.Net Core EndPoint 终点路由工作原理解读

    一.背景 在本打算写一篇关于Identityserver4 的文章时候,确发现自己对EndPoint -终结点路由还不是很了解,故暂时先放弃了IdentityServer4 的研究和编写:所以才产生了 ...