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.innerHeightvar 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>
这些也就是雨滴实现的源码，仅供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备