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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>canvas雨滴特效</title>
  6.         <style>
  7.             body{
  8.                 margin: 0;
  9.                 overflow: hidden;
  10.             }
  11.             #rain{
  12.                 display: block;
  13.                 background-color: #000;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <canvas id="rain"></canvas>
  19.  
  20.         <script>
  21.             //获取canvas元素
  22.             const canvas = document.querySelector('#rain');
  23.             //设置canvas元素宽高的函数
  24.             var wX,wY;
  25.             ~~function setSize(){
  26.                 //监控窗口发生变化时自动调用setSize函数
  27.                 window.onresize = arguments.callee;
  28.                 //获取浏览器窗口宽高
  29.                 wX = window.innerWidth;
  30.                 wY = window.innerHeight;
  31.                 //给canvas设置宽高
  32.                 canvas.width = wX;
  33.                 canvas.height = wY;
  34.             }();
  35.             //获取绘制区域(相当于画笔,可在canvas中任意位置绘制图形)
  36.             var ctx = canvas.getContext('2d');
  37.  
  38.             //随机产生两个数之间随机数
  39.             function random(min,max){
  40.                 return Math.random()*(max-min) + min;
  41.             }
  42.             //生成雨滴的构造函数
  43.             function Rain(){};
  44.             //添加原型方法
  45.             Rain.prototype = {
  46.                 init : function(){
  47.                     this.x = random(0,wX);//雨滴横坐标
  48.                     this.y = 0;//雨滴纵坐标默认从最上方下落
  49.                     this.v = random(3,4);//雨滴每秒下落的速度
  50.                     this.h = random(0.9*wY,wY);//下落到窗口高度的90%~100%
  51.                     this.r = 1;//雨滴绽放的初始半径
  52.                     this.vr = 0.4;//半径扩大的速度
  53.                 },
  54.                 draw : function(){
  55.                     if(this.y<this.h){//判断是否在90%~100%之间
  56.                         ctx.beginPath();                    //抬笔作画
  57.                         ctx.fillStyle = '#666';             //内容实心用颜色填充
  58.                         ctx.fillRect(this.x,this.y,4,8);    //画矩形小雨滴
  59.                     }else{//不在区间则以下落到地绽放成圆
  60.                         ctx.beginPath();
  61.                         ctx.strokeStyle = '#666';
  62.                         ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
  63.                         ctx.stroke();
  64.                     }
  65.                 },
  66.                 move : function(){
  67.                     if(this.y<this.h){//下落
  68.                         this.y+=this.v;//每秒下落3~4滴的距离
  69.                     }else{//绽放成圆
  70.                         if(this.r<35){
  71.                             this.r+=this.vr;
  72.                         }else{
  73.                             this.init();
  74.                         }
  75.                     }
  76.                     this.draw();//移动的雨滴画出来
  77.                 }
  78.             }
  79.  
  80.             //生成的雨滴要添加动画为方便找到存在数组中
  81.             var aRain = [];
  82.             //创造雨滴函数
  83.             function createRain(num){
  84.                 for(var i=0;i<num;i++){
  85.                     setTimeout(function(){//每隔200毫秒生成一个
  86.                         var rain = new Rain();
  87.                         rain.init();
  88.                         rain.draw();
  89.                         aRain.push(rain);
  90.                     },200*i)
  91.                 }
  92.             }
  93.             createRain(50);
  94.  
  95.             //用定时器画帧形成动画
  96.             setInterval(function(){
  97.                 // ctx.clearRect(0,0,wX,wY);//擦除上一个图形(下雪的感觉)
  98.                 // 这里不是擦除雨滴效果是加蒙版达到渐变效果
  99.                 ctx.fillStyle = 'rgba(0,0,0,0.05)';
  100.                 ctx.fillRect(0,0,wX,wY);
  101.                 for(var item of aRain){
  102.                     item.move();
  103.                 }
  104.             },1000/144);//根据自己屏幕刷新频率设置(此处是144HZ)
  105.  
  106.         </script>
  107.     </body>
  108. </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. WordCount--实现字符，单词，代码统计

    Github: https://github.com/whoNamedCody/WordCount PSP表格  PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计 ...

  2. pycharm分辨率&清晰度

    三个月前换了新电脑,安装pycharm.又换了新的大屏幕. pycharm界面拖到大屏上时,字大小和字体都没有变化,清晰度低了很多,就像打了一层薄薄的马赛克一样.拖回到原本的屏幕又清晰了. 一直以为是 ...

  3. 2019HDU多校第三场F Fansblog——威尔逊定理&&素数密度

    题意 给定一个整数 $P$($10^9 \leq p\leq 1^{14}$),设其前一个质数为 $Q$,求 $Q!  \ \% P$. 分析 暴力...说不定好的板子能过. 根据威尔逊定理,如果 $ ...

  4. Luogu P2151 [SDOI2009]HH去散步 矩乘加速DP

    思路:矩乘优化DP 提交:3次(用了一个奇怪的东西导致常数过大) 题解: 如果可以走完正向边后又走反向边那就显然了,但是不能走,所以我们要将正反向边分别编号,区分正反向边. 所以这道题的矩阵是以边的编 ...

  5. js中4种遍历语法比较

    前言:本文主要比较for.for-in.forEach和for-of的异同以及优缺点. for for循环是最原始最易理解的循环遍历方式 for(var index = 0;index < ar ...

  6. docker 1.12

    curl https://releases.rancher.com/install-docker/1.12.sh | sh http://rancher.com/docs/rancher/v1.6/e ...

  7. MySQL中使用LIMIT分页

    需求:客户端通过传递pageNum(页码)和pageSize(每页显示的条数)两个参数去分页查询数据库表中的数据. 我们知道MySQL提供了分页函数limit m,n,但是该函数的用法和需求不一样,所 ...

  8. hdu6736（寻找最小环）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6736 题意: 在给定图中寻找所有最小环 保证不存在一条边经过两个简单环 数据范围: $1\leq n ...

  9. 异步机制 - APC

    APC : An asynchronous procedure call,异步过程调用,是微软提供的一种在线程上下文中执行代码的机制.当向一个线程插入一个USER APC时,如果线程进入alertab ...

  10. OpenResty之 lua_shared_dict 指令

    1. lua_shared_dict 指令介绍 原文: lua_shared_dict syntax:lua_shared_dict <name> <size> default ...