HTML代码
<canvas id=“myCanvas” width=“1920px” height=“1080px”></canvas>
js代码
<script>// ctx.arc(x轴,y轴,圆圈大小,0默认0,2*Math.PI);var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var color = "rgba(76,175,80,0.5)";// text数字，x轴，y轴，color颜色 string需要连线的坐标0X轴 1Y轴function vasTan(text, x, y, color,string=false) {// 文字size=text/2+20;ctx.fillStyle = '#000000' //字体颜色ctx.textAlign = 'center' //文字居中ctx.font = "bold "+size+"px Arial"ctx.fillText(text, x, y + size/2.5); // 文字大小除以2.5使文字居中// 画圆ctx.strokeStyle = color; // 边框线颜色ctx.beginPath(); // 开始画图ctx.arc(x, y, size, 0, 360);//图形位置与形状ctx.fillStyle = color; //图形填充颜色ctx.fill();//画实心圆ctx.closePath();if (string) // 判断是否需要连线{ctx.moveTo(string[0],string[1]); //线开始坐标ctx.lineTo(x,y); // 线结束坐标ctx.lineWidth = 2;//线条的宽度ctx.strokeStyle = color;//线条的颜色}ctx.stroke();//结束}arr=false;len=20;while (len--) {// color="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)"var point = [Math.floor(Math.random()*1920),Math.floor(Math.random()*1080)];vasTan(len*3, point[0], point[1], color,arr);arr=point;}</script>
效果图
