原生JS利用HTML5 CANVAS画布布局点状连线图

HTML代码

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>

效果图