演示效果：http://www.atool.org/

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript" src="canvas-nest.js" ></script></body>
</html>

! function() {//封装方法，压缩之后减少文件大小function get_attribute(node, attr, default_value) {return node.getAttribute(attr) || default_value;}//封装方法，压缩之后减少文件大小function get_by_tagname(name) {return document.getElementsByTagName(name);}//获取配置参数function get_config_option() {var scripts = get_by_tagname("script"),script_len = scripts.length,script = scripts[script_len - 1]; //当前加载的scriptreturn {l: script_len, //长度，用于生成id用z: get_attribute(script, "zIndex", -1), //z-indexo: get_attribute(script, "opacity", 0.5), //opacityc: get_attribute(script, "color", "0,0,0"), //colorn: get_attribute(script, "count", 99) //count};}//设置canvas的高宽function set_canvas_size() {canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;}//绘制过程function draw_canvas() {context.clearRect(0, 0, canvas_width, canvas_height);//随机的线条和当前位置联合数组var e, i, d, x_dist, y_dist, dist; //临时节点//遍历处理每一个点random_lines.forEach(function(r, idx) {r.x += r.xa, r.y += r.ya, //移动r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点//从下一个点开始for (i = idx + 1; i < all_array.length; i++) {e = all_array[i];//不是当前点if (null !== e.x && null !== e.y) {x_dist = r.x - e.x, //x轴距离 ly_dist = r.y - e.y, //y轴距离 ndist = x_dist * x_dist + y_dist * y_dist; //总距离, mdist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速d = (e.max - dist) / e.max, context.beginPath(), context.lineWidth = d / 2, context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", context.moveTo(r.x, r.y), context.lineTo(e.x, e.y), context.stroke());}}}), frame_func(draw_canvas);}//创建画布，并添加到body中var the_canvas = document.createElement("canvas"), //画布config = get_config_option(), //配置canvas_id = "c_n" + config.l, //canvas idcontext = the_canvas.getContext("2d"), canvas_width, canvas_height, frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {window.setTimeout(func, 1000 / 45);}, random = Math.random, current_point = {x: null, //当前鼠标xy: null, //当前鼠标ymax: 20000},all_array;the_canvas.id = canvas_id;the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;get_by_tagname("body")[0].appendChild(the_canvas);//初始化画布大小set_canvas_size(), window.onresize = set_canvas_size;//当时鼠标位置存储，离开的时候，释放当前位置信息window.onmousemove = function(e) {e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;}, window.onmouseout = function() {current_point.x = null, current_point.y = null;};//随机生成config.n条线位置信息for (var random_lines = [], i = 0; config.n > i; i++) {var x = random() * canvas_width, //随机位置y = random() * canvas_height,xa = 2 * random() - 1, //随机运动方向ya = 2 * random() - 1;random_lines.push({x: x,y: y,xa: xa,ya: ya,max: 6000 //沾附距离});}all_array = random_lines.concat([current_point]);//0.1秒后绘制setTimeout(function() {draw_canvas();}, 100);
}();

知乎背景

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>仿知乎背景canvas特效</title><meta name="keywords" content="" /><meta name="description" content="" /><style type="text/css">body {text-align: center;background: #F7FAFC;overflow: hidden;background: #fff;}</style></head><body><canvas id="Mycanvas"></canvas><script>//定义画布宽高和生成点的个数var WIDTH = window.innerWidth,HEIGHT = window.innerHeight,POINT = 35;var canvas = document.getElementById('Mycanvas');canvas.width = WIDTH,canvas.height = HEIGHT;var context = canvas.getContext('2d');context.strokeStyle = 'rgba(0,0,0,0.2)',context.strokeWidth = 1,context.fillStyle = 'rgba(0,0,0,0.1)';var circleArr = [];//线条：开始xy坐标，结束xy坐标，线条透明度function Line(x, y, _x, _y, o) {this.beginX = x,this.beginY = y,this.closeX = _x,this.closeY = _y,this.o = o;}//点：圆心xy坐标，半径，每帧移动xy的距离function Circle(x, y, r, moveX, moveY) {this.x = x,this.y = y,this.r = r,this.moveX = moveX,this.moveY = moveY;}//生成max和min之间的随机数function num(max, _min) {var min = arguments[1] || 0;return Math.floor(Math.random() * (max - min + 1) + min);}// 绘制原点function drawCricle(cxt, x, y, r, moveX, moveY) {var circle = new Circle(x, y, r, moveX, moveY)cxt.beginPath()cxt.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)cxt.closePath()cxt.fill();return circle;}//绘制线条function drawLine(cxt, x, y, _x, _y, o) {var line = new Line(x, y, _x, _y, o)cxt.beginPath()cxt.strokeStyle = 'rgba(0,0,0,' + o + ')'cxt.moveTo(line.beginX, line.beginY)cxt.lineTo(line.closeX, line.closeY)cxt.closePath()cxt.stroke();}//每帧绘制function draw() {context.clearRect(0, 0, canvas.width, canvas.height);for(var i = 0; i < POINT; i++) {drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);}for(var i = 0; i < POINT; i++) {for(var j = 0; j < POINT; j++) {if(i + j < POINT) {var A = Math.abs(circleArr[i + j].x - circleArr[i].x),B = Math.abs(circleArr[i + j].y - circleArr[i].y);var lineLength = Math.sqrt(A * A + B * B);var C = 1 / lineLength * 7 - 0.009;var lineOpacity = C > 0.03 ? 0.03 : C;if(lineOpacity > 0) {drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i + j].x, circleArr[i + j].y, lineOpacity);}}}}}//初始化生成原点function init() {circleArr = [];for(var i = 0; i < POINT; i++) {circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10) / 40, num(10, -10) / 40));}draw();}//调用执行window.onload = function() {init();setInterval(function() {for(var i = 0; i < POINT; i++) {var cir = circleArr[i];cir.x += cir.moveX;cir.y += cir.moveY;if(cir.x > WIDTH) cir.x = 0;else if(cir.x < 0) cir.x = WIDTH;if(cir.y > HEIGHT) cir.y = 0;else if(cir.y < 0) cir.y = HEIGHT;}draw();}, 10);}</script></body></html>

canvans 粒子背景特效相关推荐

153.炫酷粒子背景特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
WPF实现鼠标划过点亮粒子背景特效
实现效果如下: 实现思路与上一篇博文WPF实现响应鼠标位置粒子背景动画特效一致,这里主要添加了粒子透明度改变动画.以下是在该博文的基础上进行修改的: 1.粒子类Particle.cs中添加初始半径属性 ...
php粒子背景特效_粒子背景特效Particleground.js插件使用解析_蓝戒的博客
Particleground简介: Particleground是一个JavaScript插件,用于时髦的后台粒子系统.包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果.在支持HTML5画布的 ...
particles超炫酷的粒子背景特效
话不多说先上一个demo效果图: 测试地址:https://codepen.io/VincentGarreau/pen/pnlso particlesJS 开源在Github上:https://git ...
视觉粒子html,带视觉差效果可互动的背景粒子动画特效
这是一款效果非常炫酷的jQuery和CSS3网页背景粒子动画特效.该背景特效中粒子可以使用鼠标来进行互动,并且在粒子运动的过程中带有一些视觉差特效. 制作方法 HTML结构这个背景粒子动画特效的HT ...
博客园背景特效（粒子线条，彩带，滴墨水）
博客园动态背景博客园许多个人博客首页里面的背景加入了特效以下展示几个好玩的特效一.动态粒子线条.带鼠标吸附 <!DOCTYPE html> <html lang="e ...
九、HTML5空间粒子背景动画特效
文章目录九.HTML5空间粒子背景动画特效 9.1 图片预览 9.2 index.html代码 9.3 index.js代码 9.4 gameCanvas-3.0.js代码九.HTML5空间粒子背 ...
博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示二. 权限申请三. 设置步骤一. 效果展示在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请点击博 ...
Android粒子爆炸特效[可用于任意控件]
小米手机用户可以看到,小米手机在应用卸载时会有一个粒子爆炸的特效效果,对此类动画效果垂涎已久,奈何一直没有机会用.正好最近项目里需要用到粒子爆炸的特效,于是便抽时间自己也试着仿写了一个效果出来. 先看 ...

canvans 粒子背景特效

演示效果：http://www.atool.org/

知乎背景

canvans 粒子背景特效相关推荐

最新文章

热门文章