用canvas实现雨滴效果

先看效果

看起来很炫酷，其实就是实现了雨滴ide掉落还有最后的圆

还是看源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #000;}</style>
</head><body><canvas></canvas><script>// 获取画布var canvas = document.querySelector('canvas')// 获取画笔var ctx = canvas.getContext('2d')// 不能用css改变画布大小var ch = canvas.height = window.innerHeightvar cw = canvas.width = window.innerWidth// 放雨滴var arrRain = []// 监听屏幕大小，屏幕发生变化让画布也跟着改变大小window.onresize = function () {ch = canvas.height = window.innerHeightcw = canvas.width = window.innerWidth}// 获取一个随机数，目的是为了生成随机雨滴function randow(min, max) {return Math.random() * (max - min) + min}// 构造函数function Rain() {}// 为rain添加属性和方法Rain.prototype = {// 初始化位置和雨滴下落的圆的半径init: function () {this.x = randow(0, cw)this.y = 0// 雨滴最终落地的距离不能超出屏幕this.h = randow(0.8 * ch, 0.9 * ch)this.r = 1 // 开始圆的半径this.vr = 1 // 半径增长的速度this.vy = randow(4, 5)},// 画方法draw: function () {// 小于h的时候，画雨滴，画矩形if (this.y < this.h) {ctx.beginPath()ctx.fillStyle = 'white'ctx.fillRect(this.x, this.y, 4, 10)} else {// 画圆ctx.beginPath()ctx.strokeStyle = 'white'ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)ctx.stroke()}},// 雨滴移动move: function () {// 小于h时，加y实现雨滴移动if (this.y < this.h) {this.y += this.vy} else {// 实现水花四溅的效果if (this.r < 70) {this.r += this.vr} else {// 结束效果之后初始化，又从天上生成雨滴，所以要调用init函数this.init()}}this.draw()}}// 生成雨滴function createRain(num) {for (var i = 0; i < num; i++) {// 随机生成雨滴,不是同时生成setTimeout(function () {var rain = new Rain()rain.init()rain.draw()arrRain.push(rain)}, 300 * i)}}createRain(60)setInterval(function () {ctx.beginPath()ctx.fillStyle = 'rgba(0,0,0,0.05)'ctx.fillRect(0, 0, cw, ch)for (var k of arrRain) {k.move()}}, 1000 / 80)</script>
</body></html>

这些也就是雨滴实现的源码，仅供参考

用canvas实现雨滴效果相关推荐

canvas 雨滴效果
昨天在网上跟着一位老师学习了如何运用canvas做雨滴效果,在学习的过程中老师所讲的几句话给我感触很深.他是这样说的"作为一名程序员就是要不停的学习,不断的深造自己."," ...
纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
canvas的雨滴特效
canvas的雨滴特效 var canvas = document.querySelector(".rain");//获得类(获得id用#rain)ctx = canvas.get ...
js+canvas实现雨滴特效
给大家分享一下如何用js和canvas实现炫酷的雨滴特效思路先准备好开发工具,我用的是HBuilderX,当然也可以用Notepad等其它代码编辑器.还要了解一下canvas标签,其实就是一张画布 ...
使用rainyday.js插件制作雨滴效果
插件介绍 rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件.该雨滴效果插件的特点是使用简单,易于集成.Rainyday.js是一个使用HTML5特性的纯 ...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气. 感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换. 实现一个小雨滴首先雨滴是一个个小的椭圆 ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果
这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 因为发代码有时会排版混乱,所以先发图演示了.源码已 ...

用canvas实现雨滴效果

用canvas实现雨滴效果相关推荐

最新文章

热门文章