<html>

<head>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background:green;

        }

        #div{

            position: absolute;

            z-index: -1;

            top:0;

        }

    </style>

</head>

<body>

<div id="div" style="width: 100%;height:100%">

</div>

<script>

var canvas  = document.createElement('canvas');

canvas.setAttribute('id', 'canvas');

canvas.width = document.body.clientWidth;

canvas.height = document.body.clientHeight;

div.appendChild(canvas);

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

var particles = [];

var tick = 0;

var lineRadius = 100;

function loop() {

    createParticles();

    updateParticles();

    killParticles();

    drawParticles();

    drawLine();

}

function createParticles() {

    //check on every 10th tick check

    if(tick % 10 == 0) {

        if(particles.length < 100) {

            particles.push({

                    x: Math.random()*canvas.width,

                    y: 0,

                    speed: 2+Math.random()*3, //between 2 and 5

                    radius: 5+Math.random()*5, //between 5 and 10

                    color: "white",

                    speed_x:Math.random()>=.5?-Math.random()*3:Math.random()*3

            });

        }

    }

}

function updateParticles() {

    for(var i in particles) {

        var part = particles[i];

        part.y += part.speed;

        part.x += part.speed_x;

    }

}

function killParticles() {

    for(var i in particles) {

        var part = particles[i];

        if(part.y > canvas.height) {

            part.y = 0;

        }

        if(part.x >= canvas.width||part.x<=0) {

            part.x = Math.random()*canvas.width;

        }

    }

}

function drawLine(){

	for(var i in particles){

		var part_i = particles[i];

		for (var j in particles){

			if(j>i){

				var part_j = particles[j];

				if(square(part_i.x-part_j.x)+square(part_i.y-part_j.y)<=square(lineRadius)){

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

					c.beginPath();

					c.lineWidth = .3;

					c.strokeStyle = "white";

					c.moveTo(part_i.x, part_i.y);

					c.lineTo(part_j.x,part_j.y);

					c.stroke();

					c.closePath();

				}

			}else continue;

		}

	}

}

function square(x){

	return x*x;

}

function drawParticles() {

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

    c.fillStyle = "green";

    c.globalAlpha = 0.1;

    c.fillRect(0,0,canvas.width,canvas.height);

    for(var i in particles) {

        var part = particles[i];

        var radialGradient = c.createRadialGradient(part.x,part.y,part.radius/4,part.x,part.y,part.radius);

        radialGradient.addColorStop(0,'rgba(255,255,255,.8)');

        radialGradient.addColorStop(.5,'rgba(255,255,255,.5)');

        radialGradient.addColorStop(1,'rgba(255,255,255,.3)');

        c.beginPath();

        c.arc(part.x,part.y, part.radius, 0, Math.PI*2);

        c.closePath();

        c.fillStyle = radialGradient;

        c.fill();

    }

}

setInterval(loop,30);

</script>

</body>

</html>

　　这个

globalAlpha很有意思，设置值时移动的 小点会出现 尾巴，值越小 尾巴越长，像.....

canvas 的一些效果的更多相关文章

  1. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  2. canvas实现倒计时效果示例（vue组件内编写）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  3. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  4. canvas/CSS仪表盘效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. canvas弹动效果

    弹动效果,用物体与目标的距离乘上系数再累加至速度上,让物体呈加速度运动,再让速度乘与摩擦力系数,让物体最终停止运动 代码如下所示 var canvas = document.getElementByI ...

  6. 用Canvas制作剪纸效果

    在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...

  7. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  8. 【HTML5】Canvas 实现放大镜效果

    图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...

  9. Canvas的下雪效果

    cfs.snow.js canvas 下雪场景 不会影响页面使用 使用方式非常简单 利用这个js文件,我们就能很快的让页面出现下雪的动画效果. 例如 <script type="tex ...

  10. 使用canvas实现擦除效果

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域,您可以控制其每一像素.canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. html ...

随机推荐

  1. C++备忘录

    参考资料: 1. <C++编程思想(第一卷)> 知识点: ● register变量:它是一种局部变量类型.它告诉编译器尽快访问该变量.一般会把变量放在寄存器中,但不保证一定会.不能得到或计 ...

  2. 在SQL SERVER中获取表中的第二条数据

    在SQL SERVER中获取表中的第二条数据, 思路:先根据时间逆排序取出前2条数据作为一个临时表,再按顺时排序在临时表中取出第一条数据 sql语句如下: select top 1 * from(se ...

  3. Window 注册程序关联后缀文件，双击运行

    一般来说,很多软件都会有自定义后缀的文件,比如.cpp..doc等,那么如果我们想把这些后缀与我们的软件关联起来,如何做呢 #pragma once #include "StdAfx.h&q ...

  4. VS.Net 2015 Update3 学习(1) 支持Webpack

    让vs.net 编译的时候自动执行webpack 首先 管理员模式下打开 “Developer Command Prompt for VS2015", 是管理员模式啊! 然后进入 cd c: ...

  5. iis设置asp站点

    在 IIS 6.0 中,默认设置是特别严格和安全的,这样可以最大限度地减少因以前太宽松的超时和限制而造成的攻击.譬如说默认配置数据库属性实施的最大 ASP 张贴大小为 204,800 个字节,并将各个 ...

  6. WordPress 插件推荐

    1.电商类: Woocommerce 2.幻灯片: Reslider 3.网页编写类: js_composer

  7. [Java] SoapUI使用Java获取各时间日期方法

    import java.util.*; import java.text.SimpleDateFormat; // current date String dateNew = today() // t ...

  8. ROS学习笔记（七）——节点

    NEW 1 #打开新的终端,以后不再注释$ sudo apt-get install ros-<distro>-ros-tutorials #下载一个教学用的仿真器$ roscore #运 ...

  9. STM32 串口固件库中定义的几个中断标志位什么意思?

    在stm32f10x_usart.h中以上几个宏,很没有规律,诈一看还真不知道为什么会这么定义,其实通过代码就很容易明白: D7~D5:代表中断标志位对应的中断使能位在 CR1.CR2还是CR3寄存器 ...

  10. App开发三种模式

    APP开发三种模式 现在App开发的模式包含以下三种: Native App 原生开发AppWeb App 网页AppHybrid App 混合原生和Web技术开发的App 详细介绍: http:// ...