<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. sublimetext3备份

    http://files.cnblogs.com/files/hwd13/Data.zip http://files.cnblogs.com/files/hwd13/sublime3.zip

  2. elasticsearch 初学 笔记(1)

    使用 curl进行数据的的格式, 1.下载curl,配置路径 格式 C:\Users\Administrator>curl -XPUT http://localhost:9200/dept/em ...

  3. 远程调试 ASP.NET MVC 项目

    Visual Studio 支持从一台计算机到另一台设备的远程调试.进行远程调试时,主机可以是任何支持 Visual Studio 的平台.远程设备可以是 x86.x64 或 ARM 平台. 本文将指 ...

  4. jxl_1

    import java.io.File; import jxl.CellView; import jxl.Workbook; import jxl.format.Alignment; import j ...

  5. rgba()兼容IE8

    CSS: //一般的高级浏览器都支持 background: rgba(255,255,255,0.1); //IE8下 filter:progid:DXImageTransform.Microsof ...

  6. SQL查出异常数据(ORA-01722: 无效数字)

    -- Created on 2015/4/29 by MENGHU DECLARE -- Local variables here I INTEGER; BEGIN FOR OPEN_DATA IN ...

  7. 浏览器Range,Selection等选中文本对象

    Range对象 Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. 最常见的Range是用户文本选择范围(user text selection).当用户选择了页面上的 ...

  8. grunt不是内部或外部命令错误处理

    如题, npm install -g grunt-cli发现grunt命令却不可用, 其实是环境变量问题,但是网上很多给出的方法其实是不准确的, 正确方法,可以通过npm root -g查看路径,之后 ...

  9. python爬虫实战(一)——实时获取代理ip

    在爬虫学习的过程中,维护一个自己的代理池是非常重要的. 详情看代码: 1.运行环境 python3.x,需求库:bs4,requests 2.实时抓取西刺-国内高匿代理中前3页的代理ip(可根据需求自 ...

  10. <js>实现回车键登陆方法,并处理谷歌与火狐不兼容的问题

    1.在body中添加onkeydown事件 <body onkeydown="keyLogin(event);">2.使用js相应登陆添加方法//添加回车登陆事件 fu ...