<!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. 简述移动端IM开发的那些坑：架构设计、通信协议和客户端

    1.前言 有过移动端开发经历的开发者都深有体会:移动端IM的开发,与传统PC端IM有很大的不同,尤其无线网络的不可靠性.移动端硬件设备资源的有限性等问题,导致一个完整的移动端IM架构设计和实现都充满着 ...

  2. SSIS连接SAPBI

        SSIS默认的连接管理器是没有连接到Oracle或SAPBI的,因此如果希望SSIS调用SAP RFC的话,可以使用微软提供的连接管理器插件.     有关这一点的详细信息可以参考MSDN的官 ...

  3. ObjectOutputStream和ObjectInputStream

    官方解释: ObjectOutputStream 将 Java 对象的基本数据类型和图形写入 OutputStream.可以使用 ObjectInputStream 读取(重构)对象.通过使用流中的文 ...

  4. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  5. 《BI那点儿事》Microsoft 顺序分析和聚类分析算法

    Microsoft 顺序分析和聚类分析算法是由 Microsoft SQL Server Analysis Services 提供的一种顺序分析算法.您可以使用该算法来研究包含可通过下面的路径或“顺序 ...

  6. Spark入门实战系列--4.Spark运行架构

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 1. Spark运行架构 1.1 术语定义 lApplication:Spark Appli ...

  7. Nutch源码阅读进程2---Generate

    继之前仓促走完nutch的第一个流程Inject后,再次起航,Debug模式走起,进入第二个预热阶段Generate~~~   上期回顾:Inject主要是将爬取列表中的url转换为指定格式<T ...

  8. Jeet – 先进，直观，灵活的 CSS 网格系统

    Jeet 是一个先进的,直观的 CSS 网格系统.通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格.让你用更少的代码,更快的速度构建页面布局. 您 ...

  9. Azure ARM (5) ARM Template初探 - 本地JSON Template文件(1)

    <Windows Azure Platform 系列文章目录>      Azure ARM (1) 概览      Azure ARM (2) 概览      Azure ARM (3) ...

  10. Moon.Orm 5.0 (MQL版) 实战实例

    )))                 .)             {                 )             {                 )             { ...