⭐Canvas绘制粒子连线特效
1 var canvas = document.getElementById("cas"); 2 var ctx = canvas.getContext("2d"); 3 4 resize(); 5 window.onresize = resize; 6 //定义画布大小的函数 7 function resize() { 8 canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 9 canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 10 } 11 //定时设置 浏览器下次重绘之前继续更新下一帧动画 12 var RAF = (function() { 13 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { 14 window.setTimeout(callback, 1000 / 60); 15 }; 16 })(); 17 18 // 鼠标活动时，获取鼠标坐标 19 var warea = {x: null, y: null, max: 20000}; 20 window.onmousemove = function(e) { 21 e = e || window.event; 22 23 warea.x = e.clientX; 24 warea.y = e.clientY; 25 }; 26 window.onmouseout = function(e) { 27 warea.x = null; 28 warea.y = null; 29 }; 30 31 // 添加粒子 32 // x，y为粒子坐标，xa, ya为粒子xy轴加速度，max为连线的最大距离 33 var dots = []; 34 for (var i = 0; i < 300; i++) { 35 var x = Math.random() * canvas.width; 36 var y = Math.random() * canvas.height; 37 var xa = Math.random() * 2 - 1; 38 var ya = Math.random() * 2 - 1; 39 40 dots.push({ 41 x: x, 42 y: y, 43 xa: xa, 44 ya: ya, 45 max: 6000 46 }) 47 } 48 49 // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错 50 setTimeout(function() { 51 animate(); 52 }, 100); 53 54 // 每一帧循环的逻辑 55 function animate() { 56 ctx.clearRect(0, 0, canvas.width, canvas.height); 57 58 // 将鼠标坐标添加进去，产生一个用于比对距离的点数组 59 var ndots = [warea].concat(dots); 60 61 dots.forEach(function(dot) { 62 63 // 粒子位移 64 dot.x += dot.xa; 65 dot.y += dot.ya; 66 67 // 遇到边界将加速度反向 68 dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1; 69 dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1; 70 71 // 绘制点 72 ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1); 73 74 // 循环比对粒子间的距离 75 for (var i = 0; i < ndots.length; i++) { 76 var d2 = ndots[i]; 77 78 if (dot === d2 || d2.x === null || d2.y === null) continue; 79 80 var xc = dot.x - d2.x; 81 var yc = dot.y - d2.y; 82 83 // 两个粒子之间的距离 84 var dis = xc * xc + yc * yc; 85 86 // 距离比 87 var ratio; 88 89 // 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线 90 if (dis < d2.max) { 91 92 // 如果是鼠标，则让粒子向鼠标的位置移动 93 if (d2 === warea && dis > (d2.max / 2)) { 94 dot.x -= xc * 0.03; 95 dot.y -= yc * 0.03; 96 } 97 98 // 计算距离比 99 ratio = (d2.max - dis) / d2.max; 100 101 // 画线 102 ctx.beginPath(); 103 ctx.lineWidth = ratio / 2; 104 //线条颜色 105 ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')'; 106 ctx.moveTo(dot.x, dot.y); 107 ctx.lineTo(d2.x, d2.y); 108 ctx.stroke(); 109 } 110 } 111 112 // 将已经计算过的粒子从数组中删除 113 ndots.splice(ndots.indexOf(dot), 1); 114 }); 115 116 RAF(animate); 117 }
页面使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 6 <title></title> 7 </head> 8 <body> 9 <!-- 页面背景 --> 10 <canvas id="cas"></canvas> 11 </body> 12 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> 13 <script src="./js/canvas.js"></script> 14 </html>
⭐静态html文件在手机上访问
1. 安装node
2. 全局装anywhere的npm包(npm i -g anywhere)
3. 到任意目录下用命令行执行anywhere(-p 参数可以设置启动端口)
⭐清空input输入框历史记录
1 <input type="email" name="email" autocomplete="off" />
⭐js千分位加逗号
1. parseFloat(num).toLocaleString()
2.
1 <script> 2 'use strict' 3 let format = n => { 4 let num = n.toString() 5 let decimals = '' 6 // 判断是否有小数 7 num.indexOf('.') > -1 ? decimals = num.split('.')[1] : decimals 8 let len = num.length 9 if (len <= 3) { 10 return num 11 } else { 12 let temp = '' 13 let remainder = len % 3 14 decimals ? temp = '.' + decimals : temp 15 if (remainder > 0) { // 不是3的整数倍 16 return num.slice(0, remainder) + ',' + num.slice(remainder, len).match(/d{3}/g).join(',') + temp 17 } else { // 是3的整数倍 18 return num.slice(0, len).match(/d{3}/g).join(',') + temp 19 } 20 } 21 } 22 format(12323.33) // '12,323.33' 23 </script>
⭐react+ts配置@根路径
1. 
2. 
3. 如果要同时通过src引用：
1 “paths”: [ 2 "src/*": ["./src/*"], 3 "@/*": ["./src/*"] 4 ]
⭐ts中setInterval类型为NodeJS.Timeout
⭐import XLSX from 'xlsx-style'报错
This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js
在 ode_modulesxlsx-styledistcpexcel.js 807行的
var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;
⭐git
1 git branch -a //查看本地分支 2 git checkout -b 本地分支 origin/远程分支 3 git merge 要合并的分支名字 4 git branch -d 要删除的分支名字 5 git branch -D 要删除的分支名字 //强制删除 6 git remote show origin //查看远程分支和本地分支对应 7 git remote prune origin //删除远程已经不存在的本地分支 8 git fetch //把远程分支上所有的更新都拉取下来
⭐修改echarts仪表盘的背景颜色
⭐echarts折线图从x轴原点开始
1 option = { 2 xAxis: { 3 type: 'category', 4 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 5 boundaryGap: false // 不留白，从原点开始 6 }, 7 yAxis: { 8 type: 'value' 9 }, 10 series: [{ 11 data: [820, 932, 901, 934, 1290, 1330, 1320], 12 type: 'line' 13 }] 14 };
⭐echarts折线图显示最大值的点数值
markPoint: type: 'max'
⭐js table里面添加元素
1 td = document.createElement("td"); 2 td.innerHTML = "<input type='text'/>"; 3 tr.appendChild(td);
⭐sourceTree拉取代码报错
remote: HTTP Basic: Access denied
⭐JSDOC注释规范化
https://blog.csdn.net/KNIGH_YUN/article/details/104845603
⭐伪元素没有创建新的元素
伪类
⭐JSX.Element和React.ReactNode区别
https://blog.csdn.net/sinat_36146776/article/details/105734353
⭐require().default
https://www.cnblogs.com/cangqinglang/p/10445256.html
⭐js返回顶部
document.documentElement.scrollTop = 0
⭐react区分不同的生产环境
1 if (process.env.NODE_ENV === 'production') { 2 return `https://****.*****.com/#/dashboard/${row.dashboardId}/show` 3 } else if (process.env.NODE_ENV === 'stage') { 4 return `https://*****.st.***.com/#/dashboard/${row.dashboardId}/show` 5 } else { 6 return `http://*****.test.****.com/#/dashboard/${row.dashboardId}/show` 7 }
⭐Uncaught SyntaxError: Unexpected token '<'
https://blog.csdn.net/weixin_43742708/article/details/110594790