var canvasparticle = (function () { function getelementbytag(name) { return document.getelementsbytagname(name); } function getelementbyid(id) { return document.getelementbyid(id); } // 根据传入的config初始化画布 function canvasinit(canvasconfig) { canvasconfig = canvasconfig || {}; var html = getelementbytag("html")[0]; // 获取body作为背景 // var body = getelementbytag("body")[0]; // 获取特定div作为背景 // mydiv是你想要将其作为背景的div的id var body = document.getelementbyid("mydiv"); var canvasobj = document.createelement("canvas"); var canvas = { element: canvasobj, points: [], // 默认配置 config: { vx: canvasconfig.vx || 4, vy: canvasconfig.vy || 4, height: canvasconfig.height || 2, width: canvasconfig.width || 2, count: canvasconfig.count || 100, color: canvasconfig.color || "121, 162, 185", stroke: canvasconfig.stroke || "130,255,255", dist: canvasconfig.dist || 6000, e_dist: canvasconfig.e_dist || 20000, max_conn: 10 } }; // 获取context if (canvas.element.getcontext("2d")) { canvas.context = canvas.element.getcontext("2d"); } else { return null; } body.style.padding = "0"; body.style.margin = "0"; // body.replacechild(canvas.element, canvasdiv); body.appendchild(canvas.element); canvas.element.style = "position: absolute; top: 0; left: 0;"; canvassize(canvas.element); window.onresize = function () { canvassize(canvas.element); } body.onmousemove = function (e) { var event = e || window.event; canvas.mouse = { x: event.clientx, y: event.clienty } } document.onmouseleave = function () { canvas.mouse = undefined; } setinterval(function () { drawpoint(canvas); }, 40); } // 设置canvas大小 function canvassize(canvas) { // 获取窗口的宽高 // canvas.width = window.innerweight || document.documentelement.clientwidth || document.body.clientwidth; // canvas.height = window.innerweight || document.documentelement.clientheight || document.body.clientheight; // 获取特定div的宽高 var width = document.getelementbyid("mydiv").style.width; var height = document.getelementbyid("mydiv").style.height; width = parseint(width); height = 161; canvas.width = width || window.innerweight || document.documentelement.clientwidth || document.body.clientwidth; canvas.height = height || window.innerweight || document.documentelement.clientheight || document.body.clientheight; } // 画点 function drawpoint(canvas) { var context = canvas.context, point, dist; context.clearrect(0, 0, canvas.element.width, canvas.element.height); context.beginpath(); context.fillstyle = "rgb(" + canvas.config.color + ")"; for (var i = 0, len = canvas.config.count; i < len; i++) { if (canvas.points.length != canvas.config.count) { // 初始化所有点 point = { x: math.floor(math.random() * canvas.element.width), y: math.floor(math.random() * canvas.element.height), vx: canvas.config.vx / 2 - math.random() * canvas.config.vx, vy: canvas.config.vy / 2 - math.random() * canvas.config.vy } } else { // 处理球的速度和位置,并且做边界处理 point = borderpoint(canvas.points[i], canvas); } context.fillrect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height); canvas.points[i] = point; } drawline(context, canvas, canvas.mouse); context.closepath(); } // 边界处理 function borderpoint(point, canvas) { var p = point; if (point.x <= 0 || point.x >= canvas.element.width) { p.vx = -p.vx; p.x += p.vx; } else if (point.y <= 0 || point.y >= canvas.element.height) { p.vy = -p.vy; p.y += p.vy; } else { p = { x: p.x + p.vx, y: p.y + p.vy, vx: p.vx, vy: p.vy } } return p; } // 画线 function drawline(context, canvas, mouse) { context = context || canvas.context; for (var i = 0, len = canvas.config.count; i < len; i++) { // 初始化最大连接数 canvas.points[i].max_conn = 0; // point to point for (var j = 0; j < len; j++) { if (i != j) { dist = math.round(canvas.points[i].x - canvas.points[j].x) * math.round(canvas.points[i].x - canvas.points[j].x) + math.round(canvas.points[i].y - canvas.points[j].y) * math.round(canvas.points[i].y - canvas.points[j].y); // 两点距离小于吸附距离,而且小于最大连接数,则画线 if (dist <= canvas.config.dist && canvas.points[i].max_conn < canvas.config.max_conn) { canvas.points[i].max_conn++; // 距离越远,线条越细,而且越透明 context.linewidth = 0.5 - dist / canvas.config.dist; context.strokestyle = "rgba(" + canvas.config.stroke + "," + (1 - dist / canvas.config.dist) + ")" context.beginpath(); context.moveto(canvas.points[i].x, canvas.points[i].y); context.lineto(canvas.points[j].x, canvas.points[j].y); context.stroke(); } } } // 如果鼠标进入画布 // point to mouse if (mouse) { dist = math.round(canvas.points[i].x - mouse.x) * math.round(canvas.points[i].x - mouse.x) + math.round(canvas.points[i].y - mouse.y) * math.round(canvas.points[i].y - mouse.y); // 遇到鼠标吸附距离时加速,直接改变point的x,y值达到加速效果 if (dist > canvas.config.dist && dist <= canvas.config.e_dist) { canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20; canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20; } if (dist <= canvas.config.e_dist) { context.linewidth = 1; context.strokestyle = "rgba(" + canvas.config.stroke + "," + (1 - dist / canvas.config.e_dist) + ")"; context.beginpath(); context.moveto(canvas.points[i].x, canvas.points[i].y); context.lineto(mouse.x, mouse.y); context.stroke(); } } } } return canvasinit; })();