<!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. SQL Server的Execute As与连接池结合使用的测试

    简介     在SQL Server中,Execute As关键字允许当前账户在特定上下文中以另一个用户或登录名的身份执行SQL语句,比如用户张三有权限访问订单表,用户李四并没有权限访问订单表,那么给 ...

  2. Js内存回收

    Javascript的世界中,隐藏了很多内存陷阱,不能得到合理释放的内存会埋下各种隐患,本文旨在以实用角度去解读Js涉及到的内存,且看勇士如何斗恶龙~ javascript 内存 回收 本文可以看做是 ...

  3. JSP网站开发基础总结《十》

    经过上一篇的介绍相信大家对JSP提供的过滤器一定有了一个概念,本篇我们就一起再来研究一下关于创建多个过滤器时,如果有两个以上过滤器的过滤规则相同,那么这些过滤器的执行顺序如何呢?答案是根据我们在web ...

  4. CentOS yum安装Apache + PHP + Tomcat7 + MySQL

    Linux平台上用得最多的web环境就是php.java和MySQL了,会搭建这个环境,就能把很多开源程序跑起来. 作为一个程序猿,虽然并不用精通运维的活,但基本的Linux环境搭建还是要掌握比较好, ...

  5. JavaScript中,提取子字符串方法:Slice、Substring、Substr的比较。

    在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. // slice // 语法: string.slice(beginSlice [, e ...

  6. 重读 code complete 说说代码质量

    重读code complete 说说代码质量 2014年的第一篇文章本来计划写些过去一年的总结和新年展望,但是因为还有一些事情要过一阵才能完成,所以姑且不谈这个,说说最近重读code complete ...

  7. java虚拟机启动参数分类详解

    官方文档见: http://docs.sun.com/source/819-0084/pt_tuningjava.html java启动参数共分为三类:其一是标准参数(-),所有的JVM实现都必须实现 ...

  8. SQL Server代理(1/12)：配置和概况

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. SQL Server代理是SQL Serv ...

  9. 分享使用Entity Framework的一个坑：Include无效

    如果不想延迟加载,可以通过设置:context.Configuration.LazyLoadingEnabled = false;或查询时加上AsNoTracking()方法即可. 如果不想生成代理, ...

  10. 7z制作自解压安装包

    像7z和winRAR这样的压缩工具都支持制作自解压的文件.所谓自解压的文件就是不需要目标机器上安装解压工具,通过运行压缩包自己即可解压出压缩包中的文件.下面我们就介绍一下如何利用7z的自解压功能制作应 ...