实现目标分析问题整个图主要是用canvas实现其中难点是将线的长度控制在一定范围内、并且透明度随长度变化。前置知识canvas绘制点、线、三角形、弧形// 点ctx.moveTo(this.x,this.y);ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);ctx.fillStylewhite;ctx.fill();// 线ctx.beginPath();ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);// 三角形ctx.beginPath();ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.lineTo(p3.x,p3.y);ctx.closePath();// 弧形ctx.beginPath();ctx.arc(100,100,50,0,Math.PI/2,false);// 从 0° 到 90°顺时针ctx.strokeStyleblue;ctx.lineWidth3;ctx.stroke();代码实战实现思路随机生成n个点然后随机选m个 三个随机点(属于n个点中) 组成的集合绘制三角形。headstyle*{margin:0 auto;padding:0;}canvas{position:fixed;background:black;width:100%;height:100%;}/style/headbodycanvas/canvasscriptsrc./index.js/script/body// 获取 canvas节点letctsdocument.querySelector(canvas);letctxcts.getContext(2d);// 设置宽高cts.widthwindow.innerWidth;cts.heightwindow.innerHeight;classPoint{constructor(x,y){this.xx;this.yy;this.r1;}draw(){ctx.moveTo(this.x,this.y);ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);ctx.fillStylewhite;ctx.fill();}}classGraph{constructor(){// 圆点个数this.pointSize500;this.maxHeightwindow.innerHeight;this.maxWidthwindow.innerWidth;// 对角线this.maxLineMath.sqrt(this.maxHeight*this.maxHeightthis.maxWidth*this.maxWidth);// 所有点集this.pointsnewArray(this.pointSize).fill(0).map(()newPoint(Math.random()*this.maxWidth,Math.random()*this.maxHeight))}// 绘制 p1-p2 直线drawLine(p1,p2){lettLineMath.sqrt(Math.pow(p1.x-p2.x,2)Math.pow(p1.y-p2.y,2));letat0.2-tLine/500;// this.maxLine;// 太长的线不绘制if(tLine100)return;ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.strokeStylergba(255, 255, 255,${at});}// 绘制三角形drawRan(p1,p2,p3){if(!p1||!p2||!p3)return;ctx.beginPath();this.drawLine(p1,p2);this.drawLine(p2,p3);ctx.stroke();}draw(){// 绘制所有圆点for(leti0;ithis.pointSize;i){letp1this.points[i];p1.draw();}// 选取随机的三点绘制三角形for(leti0;ithis.pointSize*this.pointSize/10;i){lett1Math.floor(Math.random()*this.pointSize);lett2Math.floor(Math.random()*this.pointSize);lett3Math.floor(Math.random()*this.pointSize);letp1this.points[t1];letp2this.points[t2];letp3this.points[t3];this.drawRan(p1,p2,p3);}}}letinit(){letgnewGraph();g.draw();}init();优化点集动态移动(弧形)随机选点、弧形半径随机。letctsdocument.querySelector(canvas);letctxcts.getContext(2d);letsetWH(){cts.widthwindow.innerWidth;cts.heightwindow.innerHeight;}letclearBG(){ctx.clearRect(0,0,cts.width,cts.height);}classPoint{constructor(x,y){this.pxx;this.pyy;this.r1;this.radius500*Math.random();this.angle0;}draw(){ctx.moveTo(this.x,this.y);ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);ctx.fillStylewhite;ctx.fill();}move(){this.xthis.pxthis.radius*Math.cos(this.angle);this.ythis.pythis.radius*Math.sin(this.angle);this.angle(this.angle0.05)%(Math.PI*2);}}classGraph{constructor(){this.pointSize500;this.maxHeightwindow.innerHeight;this.maxWidthwindow.innerWidth;this.maxLineMath.sqrt(this.maxHeight*this.maxHeightthis.maxWidth*this.maxWidth);this.pointsnewArray(this.pointSize).fill(0).map(()newPoint(Math.random()*this.maxWidth,Math.random()*this.maxHeight))}drawLine(p1,p2){lettLineMath.sqrt(Math.pow(p1.x-p2.x,2)Math.pow(p1.y-p2.y,2));letat0.2-tLine/500;// this.maxLine;if(tLine100)return;ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.strokeStylergba(255, 255, 255,${at});}drawRan(p1,p2,p3){if(!p1||!p2||!p3)return;ctx.beginPath();this.drawLine(p1,p2);this.drawLine(p2,p3);ctx.stroke();}draw(){for(leti0;ithis.pointSize;i){letp1this.points[i];p1.move();p1.draw();}for(leti0;ithis.pointSize*this.pointSize/10;i){lett1Math.floor(Math.random()*this.pointSize);lett2Math.floor(Math.random()*this.pointSize);lett3Math.floor(Math.random()*this.pointSize);letp1this.points[t1];letp2this.points[t2];letp3this.points[t3];this.drawRan(p1,p2,p3);}}}lettimernull;letinit(){setWH();letgnewGraph();timersetInterval((){clearBG();g.draw();},1000)}init();
JS实现动态点图酷炫效果
实现目标分析问题整个图主要是用canvas实现其中难点是将线的长度控制在一定范围内、并且透明度随长度变化。前置知识canvas绘制点、线、三角形、弧形// 点ctx.moveTo(this.x,this.y);ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);ctx.fillStylewhite;ctx.fill();// 线ctx.beginPath();ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);// 三角形ctx.beginPath();ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.lineTo(p3.x,p3.y);ctx.closePath();// 弧形ctx.beginPath();ctx.arc(100,100,50,0,Math.PI/2,false);// 从 0° 到 90°顺时针ctx.strokeStyleblue;ctx.lineWidth3;ctx.stroke();代码实战实现思路随机生成n个点然后随机选m个 三个随机点(属于n个点中) 组成的集合绘制三角形。headstyle*{margin:0 auto;padding:0;}canvas{position:fixed;background:black;width:100%;height:100%;}/style/headbodycanvas/canvasscriptsrc./index.js/script/body// 获取 canvas节点letctsdocument.querySelector(canvas);letctxcts.getContext(2d);// 设置宽高cts.widthwindow.innerWidth;cts.heightwindow.innerHeight;classPoint{constructor(x,y){this.xx;this.yy;this.r1;}draw(){ctx.moveTo(this.x,this.y);ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);ctx.fillStylewhite;ctx.fill();}}classGraph{constructor(){// 圆点个数this.pointSize500;this.maxHeightwindow.innerHeight;this.maxWidthwindow.innerWidth;// 对角线this.maxLineMath.sqrt(this.maxHeight*this.maxHeightthis.maxWidth*this.maxWidth);// 所有点集this.pointsnewArray(this.pointSize).fill(0).map(()newPoint(Math.random()*this.maxWidth,Math.random()*this.maxHeight))}// 绘制 p1-p2 直线drawLine(p1,p2){lettLineMath.sqrt(Math.pow(p1.x-p2.x,2)Math.pow(p1.y-p2.y,2));letat0.2-tLine/500;// this.maxLine;// 太长的线不绘制if(tLine100)return;ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.strokeStylergba(255, 255, 255,${at});}// 绘制三角形drawRan(p1,p2,p3){if(!p1||!p2||!p3)return;ctx.beginPath();this.drawLine(p1,p2);this.drawLine(p2,p3);ctx.stroke();}draw(){// 绘制所有圆点for(leti0;ithis.pointSize;i){letp1this.points[i];p1.draw();}// 选取随机的三点绘制三角形for(leti0;ithis.pointSize*this.pointSize/10;i){lett1Math.floor(Math.random()*this.pointSize);lett2Math.floor(Math.random()*this.pointSize);lett3Math.floor(Math.random()*this.pointSize);letp1this.points[t1];letp2this.points[t2];letp3this.points[t3];this.drawRan(p1,p2,p3);}}}letinit(){letgnewGraph();g.draw();}init();优化点集动态移动(弧形)随机选点、弧形半径随机。letctsdocument.querySelector(canvas);letctxcts.getContext(2d);letsetWH(){cts.widthwindow.innerWidth;cts.heightwindow.innerHeight;}letclearBG(){ctx.clearRect(0,0,cts.width,cts.height);}classPoint{constructor(x,y){this.pxx;this.pyy;this.r1;this.radius500*Math.random();this.angle0;}draw(){ctx.moveTo(this.x,this.y);ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);ctx.fillStylewhite;ctx.fill();}move(){this.xthis.pxthis.radius*Math.cos(this.angle);this.ythis.pythis.radius*Math.sin(this.angle);this.angle(this.angle0.05)%(Math.PI*2);}}classGraph{constructor(){this.pointSize500;this.maxHeightwindow.innerHeight;this.maxWidthwindow.innerWidth;this.maxLineMath.sqrt(this.maxHeight*this.maxHeightthis.maxWidth*this.maxWidth);this.pointsnewArray(this.pointSize).fill(0).map(()newPoint(Math.random()*this.maxWidth,Math.random()*this.maxHeight))}drawLine(p1,p2){lettLineMath.sqrt(Math.pow(p1.x-p2.x,2)Math.pow(p1.y-p2.y,2));letat0.2-tLine/500;// this.maxLine;if(tLine100)return;ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.strokeStylergba(255, 255, 255,${at});}drawRan(p1,p2,p3){if(!p1||!p2||!p3)return;ctx.beginPath();this.drawLine(p1,p2);this.drawLine(p2,p3);ctx.stroke();}draw(){for(leti0;ithis.pointSize;i){letp1this.points[i];p1.move();p1.draw();}for(leti0;ithis.pointSize*this.pointSize/10;i){lett1Math.floor(Math.random()*this.pointSize);lett2Math.floor(Math.random()*this.pointSize);lett3Math.floor(Math.random()*this.pointSize);letp1this.points[t1];letp2this.points[t2];letp3this.points[t3];this.drawRan(p1,p2,p3);}}}lettimernull;letinit(){setWH();letgnewGraph();timersetInterval((){clearBG();g.draw();},1000)}init();
