canvas基础知识点参考各种文档，直接上代码，有非常详细注释

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas雨滴特效</title>

        <style>

            body{

                margin: 0;

                overflow: hidden;

            }

            #rain{

                display: block;

                background-color: #000;

            }

        </style>

    </head>

    <body>

        <canvas id="rain"></canvas>

        <script>

            //获取canvas元素

            const canvas = document.querySelector('#rain');

            //设置canvas元素宽高的函数

            var wX,wY;

            ~~function setSize(){

                //监控窗口发生变化时自动调用setSize函数

                window.onresize = arguments.callee;

                //获取浏览器窗口宽高

                wX = window.innerWidth;

                wY = window.innerHeight;

                //给canvas设置宽高

                canvas.width = wX;

                canvas.height = wY;

            }();

            //获取绘制区域(相当于画笔,可在canvas中任意位置绘制图形)

            var ctx = canvas.getContext('2d');

            //随机产生两个数之间随机数

            function random(min,max){

                return Math.random()*(max-min) + min;

            }

            //生成雨滴的构造函数

            function Rain(){};

            //添加原型方法

            Rain.prototype = {

                init : function(){

                    this.x = random(0,wX);//雨滴横坐标

                    this.y = 0;//雨滴纵坐标默认从最上方下落

                    this.v = random(3,4);//雨滴每秒下落的速度

                    this.h = random(0.9*wY,wY);//下落到窗口高度的90%~100%

                    this.r = 1;//雨滴绽放的初始半径

                    this.vr = 0.4;//半径扩大的速度

                },

                draw : function(){

                    if(this.y<this.h){//判断是否在90%~100%之间

                        ctx.beginPath();                    //抬笔作画

                        ctx.fillStyle = '#666';             //内容实心用颜色填充

                        ctx.fillRect(this.x,this.y,4,8);    //画矩形小雨滴

                    }else{//不在区间则以下落到地绽放成圆

                        ctx.beginPath();

                        ctx.strokeStyle = '#666';

                        ctx.arc(this.x,this.y,this.r,0,Math.PI*2);

                        ctx.stroke();

                    }

                },

                move : function(){

                    if(this.y<this.h){//下落

                        this.y+=this.v;//每秒下落3~4滴的距离

                    }else{//绽放成圆

                        if(this.r<35){

                            this.r+=this.vr;

                        }else{

                            this.init();

                        }

                    }

                    this.draw();//移动的雨滴画出来

                }

            }

            //生成的雨滴要添加动画为方便找到存在数组中

            var aRain = [];

            //创造雨滴函数

            function createRain(num){

                for(var i=0;i<num;i++){

                    setTimeout(function(){//每隔200毫秒生成一个

                        var rain = new Rain();

                        rain.init();

                        rain.draw();

                        aRain.push(rain);

                    },200*i)

                }

            }

            createRain(50);

            //用定时器画帧形成动画

            setInterval(function(){

                // ctx.clearRect(0,0,wX,wY);//擦除上一个图形(下雪的感觉)

                // 这里不是擦除雨滴效果是加蒙版达到渐变效果

                ctx.fillStyle = 'rgba(0,0,0,0.05)';

                ctx.fillRect(0,0,wX,wY);

                for(var item of aRain){

                    item.move();

                }

            },1000/144);//根据自己屏幕刷新频率设置(此处是144HZ)

        </script>

    </body>

</html>

内容本人原创，有不足之处请见谅！欢迎指正！转载请注明出处附上链接，谢谢！

canvas入门级基本用法实现雨滴下落特效的更多相关文章

  1. jq模仿雨滴下落的动画

    效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: body{ overflow: hidden;/*这是为了防止出现滚动条*/ } .co ...

  2. canvas的常见用法

    Canvas canvas是一种抽象概念,是2D图形系统中的重要部分,canvas一系列函数最终都是android 2D图形库Skia的一些列封装,对应在SKCanvas.cpp.canvas在系统中 ...

  3. android Canvas 和 Paint用法

    自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...

  4. Javascript高级编程学习笔记（84）—— Canvas(1)基本用法

    Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...

  5. Android为TV端助力 Canvas 和 Paint用法

    自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...

  6. HTML5 canvas炫酷棱镜效果的幻灯片特效

    这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面 ...

  7. [译]Canvas的基本用法

    在本文章中 <canvas> 元素 替换内容 </canvas> 标签不可省 渲染上下文(The rendering context如何翻译) 检查支持性 一个模板骨架 一个简 ...

  8. Paint与Canvas的简单用法

    参考:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=278237 自定义View 重写onDraw方法 package com. ...

  9. Canvas的基本用法

    canvas没有设置宽度和高度的时候,会初始化宽度:300像素和高度:150像素.可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲 ...

随机推荐

  1. JavaScript中数组的排序——sort()

    数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. arrayObject.sort(方法函数) 1.如果不指定<方法函数>,则按unicode码顺序排列. 2.如果 ...

  2. asp.net mvc（模式）和三层架构（BLL、DAL、Model）的联系与区别 转载自：http://blog.csdn.net/luoyeyu1989/article/details/8275866

    首先,MVC和三层架构,是不一样的. 三层架构中,DAL(数据访问层).BLL(业务逻辑层).WEB层各司其职,意在职责分离. MVC是 Model-View-Controller,严格说这三个加起来 ...

  3. PL/SQL老是自动断开问题处理

    问题背景:情况是这样的,很多开发同事的plsql上班时间开着8个小时,有时候他们出去抽烟后或者中午吃完饭,回来在plsql上面执行就报错无响应,然后卡住了半天动弹不了,非得重新登录plsql才生效,我 ...

  4. Java8-Atomic

    import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...

  5. sqlserver2014安装Windows版教程

    下载好安装包,直接运行 根据自己的情况选择,我是首次安装,选择第一项即可. 之后一路下一步,然后等待安装. 安装完成

  6. Luogu P4270 [USACO18FEB]Cow Gymnasts (打表找规律)

    题意 传送门 题解 首先我们不竖着看奶牛而是横着看.从下往上把奶牛叫做处于第0,1,2...0,1,2...0,1,2...层.那么相当于第000层的不动,第111层的平移一格,第222层的平移222 ...

  7. Invalid HTTP_HOST header: 'xxx.xxx:8000'. You may need to add 'xxx.xx' to ALLOWED_HOSTS

    用python3 manage.py runserver 0.0.0.0:8000命令运行django程序后,通过浏览器访问服务器网址的8000端口,出现访问错误,报错为 Invalid HTTP_H ...

  8. chrome扩展开发实战入门之二－自动搜索

    目标:产生随机数,用于百度搜索:像看电视一样观看搜索结果 参考上一篇,新建目录hellocrx,其中三个文件:manifest.json  content_script.js 和jquery-3.4. ...

  9. 迭代加深 A* IDA* 初探

    并没有有用的东西, 只是用来水的. 今天看搜索,想起来了A*和IDA* 看A*去了.... 啥玩意啊这是,他们代码为啥这么长??.... 看完了,...代码怎么写啊?? .....算了,直接看题吧 找 ...

  10. Hadoop 3.2.1 win10 64位系统 vs2015 编译

    Hadoop 3.2.1 win10 64位系统 vs2015 编译 1        环境配置 1.1   JDK下载安装 1.1.1         下载 JDK 1.8    (jdk1.8.0 ...