<!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. Python数据类型之“集合(Sets)与映射(Mapping)”

    一.集合类型(Sets) 集合对象是不同的(不可重复)hashable对象的无序集合.常见用法包括:成员关系测试.移除序列中的重复.以及科学计算,例如交集.并集.差分和对称差分.通俗点来说,集合是一个 ...

  2. javaweb回顾第十篇JSTL

    前言:JSTL(JSP Standard Tag Library)JSP标准标签库.它的目的是为了简化JSP的开发,如何没有JSTL可能我们开发的时候就需要写大量的自定义标签,无疑会加大开发难度,有了 ...

  3. hibernate(四) 双向多对多映射关系

    序言 莫名长了几颗痘,真TM疼,可能是现在运动太少了,天天对着电脑,决定了,今天下午花两小时去跑步了, 现在继上一章节的一对多的映射关系讲解后,今天来讲讲多对多的映射关系把,明白了一对多,多对多个人感 ...

  4. 关于json序列化和反序列的问题，没事写个案例，希望能帮到那些需要帮忙的朋友！

    现在关于json的读写问题,有许许多多的解决方法,因人而异,根据实际问题去选择自己想要的最容易方法.我觉得自带的Newtonsoft.Json是个不错的选择,随便写两个例子吧! 一:关于简单的json ...

  5. 使用selenium+phantomJS实现网页爬取

    有些网站反爬虫技术设计的非常好,很难采用WebClient等技术进行网页信息爬取,这时可以考虑采用selenium+phantomJS模拟浏览器(其实是真实的浏览器)的方式进行信息爬取.之前一直使用的 ...

  6. javaccript学习1

    1.javascript中的三种消息框 (1)警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本" ...

  7. 文本框只读属性，disabled不能提交

    设置文本框和文本域只读的时候用到disabled="disabled",结果后台获取不到,后来想起这个不会提交,应该用readonly

  8. QT学习笔记3

    对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...

  9. html/css基础篇——html代码编写过程中的几个警惕点

    本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...

  10. fastcgi配置

    fastcgi配置 我们这里说的fastcgi配置专指nginx对fastcgi的配置,fastcgi本身的配置介绍在fastcgi 安装文中有说明. nginx的fastcgi模块提供的命令 fas ...