<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             body{

                 margin: 0;

                 padding: 0;

                 background:rgba(0,0,0,1);

             }

         </style>

     </head>

     <body>

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

         <script type="text/javascript">

             var canvas = document.getElementById("canvas");

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

             canvas.width = window.innerWidth;

             canvas.height = window.innerHeight;

             w = window.innerWidth;

             h = window.innerHeight;

             var max = 100;

             var par = [];

             ctx.lineWidth = 2;

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

                 par.push({

                     xs:Math.random()*w,

                     ys:Math.random()*h,

                     xc:-2+Math.random()*4,

                     yc:Math.random()*5+2

                 })

             }

             var draw = function(){

                 ctx.clearRect(0,0,w,h);

                 for( var j = 0; j < par.length; j++ ){

                     var p = par[j];

                     ctx.beginPath();

                     ctx.moveTo(p.xs,p.ys);

                     ctx.lineTo(p.xs+p.xc,p.ys+p.yc);

                     ctx.stroke();

                     ctx.strokeStyle = "rgba(174,194,224,.5)";

                     p.xs += p.xc;

                     p.ys +=p.yc;

                     if( p.xs>w||p.ys>h){

                         p.xs = Math.random()*w;

                         p.ys =-20;

                     }

                 }

                 requestAnimationFrame(draw);

             }

 //            draw();

 //            setInterval(function(){

 //                draw();

 //            },40)

             requestAnimationFrame(draw);

         </script>

     </body>

 </html>

canvas粒子效果-snow的更多相关文章

  1. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  2. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  3. canvas 粒子效果

    var canvas = document.createElement('canvas'); var cxt = canvas.getContext('2d'); var W = canvas.wid ...

  4. Canvas + JavaScript 制作图片粒子效果

    首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...

  5. canvas实现的粒子效果

    前言:我的这个share很简单,没什么技术水准,主要是我自己觉得canvas这个标签很cool!,简单实用又能装X,而且又能实现很多看起来很炫的东西. 一 关于canvas <canvas> ...

  6. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  7. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  8. 打造高大上的Canvas粒子(一)

    HTML5 Canvas <canvas>标签定义图形,比如图表和其他图像,必须用脚本(javascript)绘制图形. 举例:绘制矩形 <script> var c = do ...

  9. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

随机推荐

  1. Visual Studio Emulator for Android 里面的安卓模拟器如何启用

    打开软件

  2. centos-lynx

    1.官网 http://lynx.isc.org 2.稳定版本 http://invisible-mirror.net/archives/lynx/tarballs/lynx2.8.8rel.2.ta ...

  3. Redis安装配置与Jedis访问数据库

    一.NOSQL概要 NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库.NoSQL数据库的四大分类 键值(Key-Value)存储数据库 这一类数据 ...

  4. Canvas 示例：4种超炫的网站动画背景效果

    今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段时间.最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中,在这里我们想向您分享几个使用  JavaSc ...

  5. Windows Azure Cloud Service (10) Role的生命周期

    <Windows Azure Platform 系列文章目录> 在上一章内容中,我们提到了Windows Azure会依次调用角色(Role)实例的OnStart()方法和Run()方法. ...

  6. Hyperledger fabric Client Node.js Hello World示例程序

    简介 Hyperledger fabric Client (HFC)提供了基于Node.js的应用接口来访问Hyperledger区块. 本文介绍了一个使用HFC访问IBM Bluemixr区块服务的 ...

  7. MVC知识进阶01

    下面是在项目中有关于MVC的知识总结,有些地方若不对,请指出. 一:MVC的基本知识 1 名词解释    *惯例优先原则<约定大于配置>:是一种开发设计模式,说是在项目里面使用事先规定的命 ...

  8. WinForm 容器控件

    容器控件: 布局:2个属性:Anchor:锁定位置Dock:填充位置一般Dock是与容器控件配合使用 Panel:就是一个区域,类似于DIV,可以独立布局,还可以让其它控件及容器在它的内部再次布局 F ...

  9. 实现了IEnumerable接口的GetEnumerator 即可使用 Foreach遍历，返回一个IEnumerator对象

    #region 程序集 mscorlib.dll, v4.0.0.0 // C:\Program Files (x86)\Reference Assemblies\Microsoft\Framewor ...

  10. Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

    Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 上一章我 ...