JS_Canvas绘制通信网络结点

最新推荐文章于 2024-04-08 20:58:26 发布

WWWOWhite

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量982

点赞数 2

分类专栏：前端实验文章标签： canvas js

本文链接：https://blog.csdn.net/qq_45915904/article/details/124168892

版权

前端实验专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS_Canvas绘制通信网络结点

实现效果

通过画布绘制通信网络节点分布示意图，并能实现节点间通信链路的连线，即点击添加结点按钮可以随机生成结点，单击任意两个结点完成连线

canvas菜鸟教程：

https://www.runoob.com/html/html5-canvas.html

基础知识

Canvas画圆

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath(); // 开始画图
ctx.arc(x, y, 10, 0, 360); //（圆心横纵坐标，圆心纵坐标，半径，0，360） |0，360表示画出的是一个圆
ctx.fillStyle = color; //图形填充颜色
ctx.fill(); //画实心圆
ctx.closePath();

Canvas画线

ctx.beginPath();
ctx.strokeStyle = "#0000ff"; //线的颜色
ctx.moveTo(x1, y1);	//起始点坐标
ctx.lineTo(x2, y2);	//末端坐标
ctx.stroke();

思路

创建canvas画布

<body>
    <canvas id="myCanvas" width="400px" height="400px" style="border:1px solid #000000;">
    </canvas>
    <button onclick="addDot()">添加结点</button>
</body>

生成随机结点

给按钮增点击事件

<button onclick="addDot()">添加结点</button>

编写点击事件

<script>
     var dots = [];
    var drawpoint = [];
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var color = "red";
    var di = 0;
    var flag = 0;

    function addDot() {
    //随机生成点的坐标
    var point = [Math.floor(Math.random() * 390), Math.floor(Math.random() * 390)];
    //将点的信息存入提前定义的数组，方便后续的连线操作
    dots[di] = point;
    di = di + 1;
    //另外编写绘制函数
    createDot(point[0], point[1]);
}

function createDot(x, y) {
   
    ctx.beginPath(); // 开始画图
    ctx.arc(x, y, 10, 0, 360); //（圆心横纵坐标，圆心纵坐标，半径，0，360） |0，360表示画出的是一个圆
    ctx.fillStyle = color; //图形填充颜色
    ctx.fill(); //画实心圆
    ctx.closePath();
}
</script>

点击连线

创建点击监听事件

<script>
    window.onload = function() {
    // 监听点击事件
    c.addEventListener("mouseup", drawline);
}
</script>

编写触发函数drawline

function drawline(event) {
    // 鼠标当前的位置
    var x = event.clientX - c.getBoundingClientRect().left;
    var y = event.clientY - c.getBoundingClientRect().top;

    for (var i = 0; i < dots.length; i++) {
        ctx.beginPath();
        // 通过距离计算判断当前点是否在圆内
        if (((x - dots[i][0]) * (x - dots[i][0]) + (y - dots[i][1]) * (y - dots[i][1])) < 100) {
            //表示当时为第一个点
            if (flag % 2 == 0) {
                drawpoint[0] = dots[i][0];
                drawpoint[1] = dots[i][1];

            } else {
                //第二个点，需要完成连线操作
                drawpoint[2] = dots[i][0];
                drawpoint[3] = dots[i][1];
                ctx.strokeStyle = "#0000ff";
                ctx.moveTo(drawpoint[0], drawpoint[1]);
                ctx.lineTo(drawpoint[2], drawpoint[3]);
                ctx.stroke();
            }

            flag = flag + 1;
        }
    }

}

总代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <canvas id="myCanvas" width="400px" height="400px" style="border:1px solid #000000;">
        </canvas>
        <button onclick="addDot()">添加结点</button>
    </body>


</html>


<script>
    //存放点坐标的数组 如 dots[0][0],dots[0][1]分别为第一个点的x和y
    var dots = [];
    // 定义存放即将被连线点的坐标 drawpoint[0],drawpoint[1]分别存放第一个点的x和y drawpoint[2]drawpoint[3]分别存放第二个点的x和y 
    var drawpoint = [];

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var color = "red";
    // di为dots的下标
    var di = 0;
    // 标志是点击的第一个点还是第二个点
    var flag = 0;

    window.onload = function() {
        // 监听点击事件
        c.addEventListener("mouseup", drawline);
    }

    function drawline(event) {
        // 鼠标当前的位置
        var x = event.clientX - c.getBoundingClientRect().left;
        var y = event.clientY - c.getBoundingClientRect().top;

        for (var i = 0; i < dots.length; i++) {
            ctx.beginPath();
            // ctx.arc(dots[i][0],dots[i][1],10,0,360);
            // 通过距离计算判断当前点是否在圆内
            if (((x - dots[i][0]) * (x - dots[i][0]) + (y - dots[i][1]) * (y - dots[i][1])) < 100) {
                if (flag % 2 == 0) {
                    drawpoint[0] = dots[i][0];
                    drawpoint[1] = dots[i][1];

                } else {
                    drawpoint[2] = dots[i][0];
                    drawpoint[3] = dots[i][1];
                    ctx.strokeStyle = "#0000ff";
                    ctx.moveTo(drawpoint[0], drawpoint[1]);
                    ctx.lineTo(drawpoint[2], drawpoint[3]);
                    ctx.stroke();
                }

                flag = flag + 1;
            }
        }

    }

    function addDot() {
        var point = [Math.floor(Math.random() * 390), Math.floor(Math.random() * 390)];
        dots[di] = point;
        di = di + 1;
        createDot(point[0], point[1]);
    }

    function createDot(x, y) {
        ctx.fillStyle = '#000000' //字体颜色

        ctx.beginPath(); // 开始画图
        ctx.arc(x, y, 10, 0, 360); //图形位置与形状
        ctx.fillStyle = color; //图形填充颜色
        ctx.fill(); //画实心圆
        ctx.closePath();
    }
</script>

WWWOWhite

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS_Canvas绘制通信网络结点

JS_Canvas绘制通信网络结点实现效果基础知识Canvas画圆Canvas画线思路生成随机结点点击连线总代码实现效果通过画布绘制通信网络节点分布示意图，并能实现节点间通信链路的连线，即点击添加结点按钮可以随机生成结点，单击任意两个结点完成连线canvas菜鸟教程：https://www.runoob.com/html/html5-canvas.html基础知识Canvas画圆var c = document.getElementById("myCanvas");var ctx = c.
复制链接

扫一扫