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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-06-07

JavaScript canvas实现雨滴特效

本文实例为大家分享了canvas实现雨滴特效的具体代码,供大家参考,具体内容如下 一.雨滴特效需求 雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失,雨滴特效随窗口变化自适应 二.雨滴实现思路 1. 用面向对象的思维 首先创建canvas画布 ,绘制一个雨滴的初始化形状 2. 在给雨滴添加运动的方法 3. 通过定时器让雨滴运动起来 三.具体分析 1.雨滴初始化需要的属性有哪些? 坐标x,y 宽高w,h . 2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性,也就是y轴坐标不断加

JavaScript+canvas实现七色板效果实例

本文实例讲述了JavaScript+canvas实现七色板效果.分享给大家供大家参考,具体如下: 效果图如下: html: <canvas id="canvas" class="canvas" width="600" height="600"></canvas> css: html,body{margin: 0;padding: 0} .canvas{display: block; margin-lef

JavaScript Canvas编写炫彩的网页时钟

本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下 只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网

JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法.分享给大家供大家参考,具体如下: 1.convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布:彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData():最后为myImage指定彩色图片的路径. 2.getColorData(

一个JavaScript的求爱小特效

这里面做了一个JavaScript的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了.闷骚男们,是不是可以给你的小萝莉发个这样的网页啊.给力的. 贴上code吧: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t

基于javascript实现tab切换特效

本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px;

轻松实现javascript图片轮播特效

本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l

javascript实现tab切换特效

本文为大家分享了javascript实现tab切换特效的方法,具体的实现内容如下,先看一下效果图: 很简单的javascript实现tab切换特效 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tab</title> <script src="js/jquery-1.11.1.js&qu

javascript 模拟select下拉列表特效

javascript 模拟select下拉列表特效 by jb51.net function gets_id(objName){ if(document.getElementById){ return eval('document.getElementById("' + objName + '")'); }else if(document.layers){ return eval("document.layers['" + objName +"']&quo

javaScript canvas实现(画笔大小 颜色 橡皮的实例)

实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <div> <!--<input type="button" id="open" value="open&q

javascript canvas检测小球碰撞

本文实例为大家分享了javascript canvas实现检测小球碰撞的具体代码,供大家参考,具体内容如下 定义一个canvas标签 <div class="cnavasInfo"> <canvas id="canvas" width="800" height="500" ></canvas> </div> 函数以及相关的逻辑处理 export default { data()