canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
类别:编程学习 浏览量:1828
时间:2021-11-05 14:26:51 canvas实现字体粒子爆炸特效
javascript canvas实现雨滴效果本文实例为大家分享了javascript canvas实现雨滴效果的具体代码,供大家参考,具体内容如下
先看效果
看起来很炫酷,其实就是实现了雨滴的掉落还有最后的圆
还是看源码
<!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.innerHeight var cw = canvas.width = window.innerWidth // 放雨滴 var arrRain = [] // 监听屏幕大小,屏幕发生变化让画布也跟着改变大小 window.onresize = function () { ch = canvas.height = window.innerHeight cw = 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>
这些也就是雨滴实现的源码,仅供参考。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- nodejssocket文件传输(node+socket实现简易聊天室功能)
- js的异步请求(浅谈JS三座大山之异步和单线程)
- pythonjson库(Python常用的json标准库)
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- ExtJs中XTemplate使用
- js判断对象是否存在
- SQLServer中JSON文档型数据的查询问题解决(SQLServer中JSON文档型数据的查询问题解决)
- js怎么防抖(JS防抖节流函数的实现与使用场景)
- js编写一个数组去重的方法(JS实现数组过滤从简单到多条件筛选)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- js中toFixed() 的使用
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- js的replace的用法
- 自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
- 越南特产(越南特产首饰)
- TVB负评王连续挑战警察角色《使徒行者3》中将饰演卧底(TVB负评王连续挑战警察角色使徒行者3中将饰演卧底)
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
热门推荐
- 宝塔面板程序目录(将宝塔面板linux版装在/www以外的目录的方法)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- WinForm窗体间如何传值
- sql server2008脚本执行(在Sql Server中调用外部EXE执行程序引发的问题)
- python与气象(使用Python和Prometheus跟踪天气的使用方法)
- python切片的用法(Python进阶之全面解读高级特性之切片)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- mysql存储json的方式(MySQL中查询json格式的字段实例详解)
- sql查询语句casewhen是什么意思(SQL Server中使用判断语句IF ELSE/CASE WHEN 案例)
- sqlserver百分比数据查询时间(SQL Server统计信息更新时采样百分比对数据预估准确性的影响详解)