<!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. XML学习笔记3——XSD简述

    现在的语言,如果不有那么一点OO的影子,都不好意思称之为语言了.在XML的语义约束方面,DTD虽然简单,但是功能不够强大,完全是直白的描述,于是又有了替代DTD的XSD(XML Schema Defi ...

  2. ssh(sturts2_spring_hibernate) 框架搭建之hibernate2

    一.今天要进行解答的是对上次hibernate1进行进一步的完善,这次第一是进一步使用spring注入一个SessionFactory实例,避免了自己new实例:第二是应用数据库池(c3p0). 二. ...

  3. LLBL Gen Template Studio 2.x

    Template Studio for LLBLGen Pro released Today we released Template Studio, a full-featured IDE for ...

  4. 为什么MVC不是一种设计模式

    http://damoqiongqiu.iteye.com/blog/1949256 ---比较Backbone和Ext4.x在MVC实现上的差异 大漠穷秋 前言 圣人云:不想做妈咪的小姐不是好码农. ...

  5. Geometry Surface of OpenCascade BRep

    Geometry Surface of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲面是参数表示的曲面 ,在边界表示中其数据存在于BRep_TFace中, ...

  6. c#Dictionary键值对的使用

    直接粘代码吧 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  7. solr：快速开始

    本文已挪至  http://www.zhoujingen.cn/blog/8535.html 明年工作主要和搜索有关,在自己学习过程中分享让更多人受益是我一贯的做法,所以我会把对Solr的学习在这里与 ...

  8. Mybatis逆向生成

    在已经有了数据库的表的时候,为了方便起见,我们可以逆向生成javabean,xml,dao接口等,当然,下载mybaits-generation的工具,我这里用的是eclipse插件,然后准备一 个x ...

  9. Elasticsearch入门介绍

    ES是一个高扩展的.开源的.全文检索的搜索引擎,它提供了近实时的索引.搜索.分析功能. ES文档翻译与总结参考:ES知识汇总 应用场景 1 它提供了强大的搜索功能,可以实现类似百度.谷歌等搜索. 2 ...

  10. WCF实现方法重载

    一.服务契约(包括回调契约)通过指定不同的OperationContract.Name来实现重载方法,当然代码部份还是必需符合C#的重载要求,即相同方法名称,不同的参数个数或参数类型 namespac ...