html

之前做的拿出来分享下

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">body{padding: 0;margin: 0;}#sets{position: fixed;bottom: 300px;right: 65px;display: none;display: flex;align-items: center;}.setss{position: fixed;bottom: 30px;right: 30px;display: none;display: flex;align-items: center;justify-content: center;flex-direction: column;}#use{position: fixed;top: 0;right: 0;background-color: transparent;border: transparent;width: 50px;height: 50px;}.in1{width: 50px;}</style></head><body><div><canvas id="frist" style="border:1px solid #c3c3c3;margin: 0;"></canvas></div><button id="use"></button><div id="sets"><form class="setss" name="in1"><span>数量: </span><input class="in1" type="number" /><span>尺寸: </span><input class="in1" type="number" /><span>透明度-点0-1: </span><input class="in1" type="number" /><span>透明度-鼠标线0-1: </sspan><input class="in1" type="number" /><span>透明度-点线0-1: </span><input class="in1" type="number" /></form><button id="ourb">start</button></div><script>var a = document.getElementById('frist'),Dwidth,Dheight,dots = [],much = 40,op =1,opmou = 0.5,opline = 0.1,pointSize = 10;var int = document.getElementsByClassName('in1');int[0].value = much;int[1].value = pointSize;int[2].value = op;int[3].value = opmou;int[4].value = opline;var sizeD = ()=>{Dwidth = document.documentElement.clientWidth;Dheight = document.documentElement.clientHeight;}sizeD();console.log(Dwidth,Dheight);a.width = Dwidth - 8;a.height = Dheight - 8;function getdos(){dots = [];//粒子个数var ws = a.width,hs = a.height;// var wwp = parseInt(ws / (2 * pointSize + 4)), //每行个数//  hhp = parseInt(hs / (2 * pointSize + 4));// 每列个数var wwp = parseInt(Math.sqrt(much)),hhp = wwp + 1;var whp = hhp * wwp;console.log(wwp + '*' + hhp + '=' + whp);var wcc = ws / pointSize / wwp,hcc = hs / pointSize / hhp;console.log(wcc + '*' + hcc );var n = 0;for(var hi = 0; hi < hhp; hi ++){for (var i = 0; i < wwp; i++) {// var x = Math.random() * (a.width - 2 * pointSize) + pointSize;// var y = Math.random() * (a.height - 2 * pointSize) + pointSize;var xa = (Math.random() * 2 - 1)/1;var ya = (Math.random() * 2 - 1)/1;var x = (pointSize + 2 * wcc) + 2 * (i * (pointSize + 2 * wcc));var y = (pointSize + 2 * hcc) + 2 * (hi * (pointSize + 2 * hcc));// var xa = 0;// var ya = 0;n ++;if(n > much){break;}dots.splice(n,1,{x, y, xa, ya})}}}this.getdos();var bo = document.getElementById('use'),sb = document.getElementById('ourb'),se = document.getElementById('sets'),opens = false;bo.onclick = ()=>{open = !open;if(open){se.style.display = 'none';}else{se.style.display = 'block';}}ourb.onclick = ()=>{much = +int[0].value;pointSize = +int[1].value;if(int[2].value >= 0 && int[2].value <= 1 && int[3].value >= 0 && int[3].value <= 1 && int[4].value >= 0 && int[4].value <= 1){op = int[2].value;opmou = int[3].value;opline = int[4].value;}else{console.log('透明度设置错误')}getcolor();this.getdos();}window.onresize = ()=>{sizeD();console.log(Dwidth,Dheight);a.width = Dwidth - 8;a.height = Dheight - 8;this.getdos();};var axt = a.getContext('2d');var colors = [];//颜色var getcolor = ()=>{// for (var i = 0; i < much; i++) {//   var mu = parseInt(Math.random() * 16777215).toString(16);//    colors.splice(i,1,mu)// }for (var i = 0; i < much + 3; i++) {var mu = parseInt(Math.random() * 256);colors.splice(i,1,mu)}}getcolor();var warea = {x: -1000, y: -1000, max: 20000};a.onmousemove = function(e) {e = e || window.event;warea.x = e.clientX;warea.y = e.clientY;};document.onmouseout = function(e) {warea.x = -1000;warea.y = -1000;};document.onclick = (e)=> {warea.x = -1000;warea.y = -1000;};var active = ()=>{axt.clearRect(0,0,a.width,a.height);for (var n = 0; n < dots.length; n++) {var na = dots[n];for(var i = 0; i < dots.length; i ++){var ia = dots[i];if(ia == na)continue;var cx = ia.x - na.x,cy = ia.y - na.y;na.xa *= ((cx * cx + cy * cy) <= (4 * pointSize * pointSize))? -1: 1;na.ya *= ((cx * cx + cy * cy) <= (4 * pointSize * pointSize))? -1: 1;}dots[n].xa *= (dots[n].x > a.width - pointSize)? -1: 1;dots[n].ya *= (dots[n].y > a.height - pointSize)? -1: 1;dots[n].xa *= (dots[n].x < pointSize)? -1: 1;dots[n].ya *= (dots[n].y < pointSize)? -1: 1;dots[n].x += dots[n].xa;dots[n].y += dots[n].ya;var c1 = colors[n];var c2 = colors[n + 1];var c3 = colors[n + 2];// axt.fillStyle = '#' + c;axt.fillStyle = 'rgba(' + c1 + ',' + c2 + ',' + c3 + ',' + op + ')';// axt.fillRect(dots[n].x,dots[n].y,pointSize,pointSize);axt.beginPath();axt.arc(dots[n].x,dots[n].y,pointSize,0,Math.PI * 2,true);axt.closePath();axt.fill();var ndots = [warea].concat(dots);for (var i = 0; i < ndots.length; i++) {var d2 = ndots[i];if (dots[n] === d2 || d2.x === null || d2.y === null) continue;var xc = dots[n].x - d2.x;var yc = dots[n].y - d2.y;var dis = xc * xc + yc * yc;var ratio;if (dis < d2.max) {// 如果是鼠标，则让粒子向鼠标的位置移动if (d2 === warea && dis > (d2.max / 2)) {// dots[n].x -= xc * 1;// dots[n].y -= yc * 1;dots[n].x -= xc * 0.01;dots[n].y -= yc * 0.01;}ratio = (d2.max - dis) / d2.max;axt.beginPath();axt.lineWidth = ratio / 2;// axt.fillStyle = ;// axt.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';axt.strokeStyle = 'rgba(' + c1 + ',' + c2 + ',' + c3 + ',' + opmou + ')';axt.moveTo(dots[n].x, dots[n].y);axt.lineTo(d2.x, d2.y);axt.stroke();}var mx = dots[n].x,my = dots[n].y,mxa = d2.x,mya = d2.y;var mxc = mxa - mx,myc = mya - my;var cut = Math.sqrt(+Math.pow(mxc,2) + +Math.pow(myc,2));// console.log(cut);if(cut < 200){axt.beginPath();axt.lineWidth = 0.1;axt.strokeStyle = 'rgba(' + c1 + ',' + c2 + ',' + c3 + ',' + opline + ')';axt.moveTo(mx, my);axt.lineTo(mxa, mya);axt.stroke();}}}// console.log(dots)}window.setInterval(()=>{active();},10);</script></body>
</html>

资源下载 0积分

链接: 背景文件.

便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}相关推荐

canvas实战之酷炫背景动画（二）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（三）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（一）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（七）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（五）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（四）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（六）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个文章目录一.源码地址二.实现效果 1. 电脑端 2. 手机端三.源 ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}

便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}

html

资源下载 0积分

便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}相关推荐

最新文章

热门文章