canvas：绘制点和点之间连线

最新推荐文章于 2024-10-08 17:48:41 发布
最新推荐文章于 2024-10-08 17:48:41 发布
阅读量70 收藏
点赞数 1
分类专栏： canvas 文章标签： 前端 canva可画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xilejie/article/details/103765227
版权

效果图：
在这里插入图片描述

<template>
    <div class="home-box">
        <canvas id="canvas" />
        <div class="lightCircle" ref="circleRef" v-for="(item,index) in 5" :key="index"></div>
        <div class="lightCircle" ref="circleRef2" v-for="(item,index) in 5" :key="index + '1'"></div>
        <div :class="'lightCircle2 lightCircle2'+index" ref="circleRef3" v-for="(item,index) in 5" :key="index + '2'"></div>
        <div ref="circle0" class="circle circle0">
            <span class="chi">一级菜单</span>
        </div>
        <div ref="circle1" class="circle circle1">
            <span class="chi">二级菜单1</span>
        </div>
        <div ref="circle2" class="circle circle2">
            <span class="chi">二级菜单2</span>
        </div>
        <div ref="circle3" class="circle circle3">
            <span class="chi">二级菜单3</span>
        </div>
        <div ref="circle4" class="circle circle4">
            <span class="chi">二级菜单4</span>
        </div>
        <div ref="circle5" class="circle circle5">
            <span class="chi">二级菜单5</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "homePage",
    data () {
        return {
            resizeTimer: null,
        }
    },
    mounted () {
        this.initCanvas();
    },
    methods: {
        initCanvas () {
            let that = this;
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");

            this.canvasResize(canvas, ctx);
            window.onresize = function () {
                setTimeout(() => {
                    that.canvasResize(canvas, ctx, 1);
                }, 500)
            }
        },
        canvasResize (canvas, ctx, flag) {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            this.createLine(canvas, ctx, flag);//画线
        },
        createLine (canvas, ctx, flag) {
            let that = this;
            let { circle0, circle1, circle2, circle3, circle4, circle5 } = this.$refs,//offsetLeft依次对应 圆心,左上角
                r0 = circle0.offsetWidth / 2,
                r1 = circle1.offsetWidth / 2,
                dig0 = Math.PI / 9,//20度
                dig1 = Math.PI / 6,//30度
                dig3 = Math.PI / 3,//60度
                dig4 = Math.PI / 18,//10度
                dig5 = Math.PI * 11 / 36,//55度
                // console.log(Math.sin(Math.PI/2));//等于1，Math.PI代表180度
                //五环上的坐标
                valueArr1 = [
                    {//value1
                        x: circle1.offsetLeft + r1 + r1 * Math.cos(dig1),
                        y: circle1.offsetTop + r1 + r1 * Math.sin(dig1),
                    },
                    {//value2
                        x: circle2.offsetLeft + r1 - r1 * Math.sin(dig3),
                        y: circle2.offsetTop + r1 + r1 * Math.cos(dig3),
                    },
                    {//value3
                        x: circle3.offsetLeft,
                        y: circle3.offsetTop + r1,
                    },
                    {//value4
                        x: circle4.offsetLeft + r1 - r1 * Math.sin(dig1),
                        y: circle4.offsetTop + r1 - r1 * Math.cos(dig1),
                    },
                    {//value5
                        x: circle5.offsetLeft + r1 + r1 * Math.cos(dig0),
                        y: circle5.offsetTop + r1 - r1 * Math.sin(dig0),
                    },
                ],
                //圆心上的坐标
                valueArr0 = [
                    {//对应value1
                        x: circle0.offsetLeft - r0 * Math.cos(dig0),
                        y: circle0.offsetTop - r0 * Math.sin(dig0),
                    },
                    {//对应value2
                        x: circle0.offsetLeft + r0 * Math.cos(dig1),
                        y: circle0.offsetTop - r0 * Math.sin(dig1),
                    },
                    {//对应value3
                        x: circle0.offsetLeft + r0 * Math.cos(dig4),
                        y: circle0.offsetTop + r0 * Math.sin(dig4),
                    },
                    {//对应value4
                        x: circle0.offsetLeft + r0 * Math.cos(dig5),
                        y: circle0.offsetTop + r0 * Math.sin(dig5),
                    },
                    {//对应value5
                        x: circle0.offsetLeft - r0 * Math.cos(dig0),
                        y: circle0.offsetTop + r0 * Math.sin(dig0),
                    },
                ];

            clear();
            createCircle(flag);
            for (let i = 0; i < valueArr1.length; i++) {
                drawDynamicLine(valueArr1[i].x, valueArr1[i].y, valueArr0[i].x, valueArr0[i].y);
            }

            /*清除画布*/
            function clear () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }

            /*画点*/
            function createCircle (flag) {
                ctx.fillStyle = "#01abf9";

                let style = document.styleSheets[0];//keyframes
                if (flag == 1) {
                    //自适应拖动屏幕时，删除keyframes样式
                    for (let j = 0; j < valueArr1.length; j++) {
                        style.deleteRule("Mylight" + j);
                    }
                }

                for (let i = 0; i < valueArr1.length; i++) {
                    that.$nextTick(() => {
                        if (that.$refs.circleRef[i]) {
                            that.$refs.circleRef[i].style.left = valueArr1[i].x - 1 + 'px';
                            that.$refs.circleRef[i].style.top = valueArr1[i].y - 1 + 'px';
                        }
                        if (that.$refs.circleRef2[i]) {
                            that.$refs.circleRef2[i].style.left = valueArr0[i].x - 1 + 'px';
                            that.$refs.circleRef2[i].style.top = valueArr0[i].y - 1 + 'px';
                        }
                        // 写入keyframes样式
                        style.insertRule(`@keyframes Mylight${i}{
                            0% { left:${that.$refs.circleRef[i].style.left};top:${that.$refs.circleRef[i].style.top}}
                            90%{ opacity:1}
                            100%{left:${that.$refs.circleRef2[i].style.left};opacity:0;top:${that.$refs.circleRef2[i].style.top};}
                        }`, 1);
                    })
                }
                ctx.shadowBlur = 2;//Reseting the blur
            }

            /*
                绘制两点直线
                画动态直线
                @(x1,y1)    起点
                @(x2,y2)    终点
            */
            function drawDynamicLine (x1, y1, x2, y2) {
                const x22 = x2;
                const y22 = y2;

                if (x1 == x2) {
                    drawVerticalLine(x1, y1, x2, y2);   /*斜率不存在的情况*/
                } else {
                    drawCommonLine(x1, y1, x2, y2);    /*斜率为正或者负或者0*/
                }

                /*k存在的情况*/
                function drawCommonLine (x1, y1, x2, y2) {
                    let timer1 = null;
                    clearInterval(timer1);

                    //y=kx+b
                    let k = (y2 - y1) / (x2 - x1)   //斜率k     正 负 0
                    let b = y1 - k * x1           //常数b
                    let i = 0;
                    let flag = compare(x1, x2);

                    function draw () {
                        let xi = x1 + i;
                        let yi = k * xi + b;
                        let xj = x1 + i + 20;     //控制步长决定绘制的是虚线还是实线
                        let yj = k * xj + b;
                        //最后一段 线段的步长缝合
                        if (xj + 20 > x22 || yj + 20 > y22) {
                            let a = x22 + 20 - xj;
                            xj = x1 + i + a;
                            yj = k * xj + b;
                            // console.log(1,xj,yj,x22,y22);
                            drawLine(xi, yi, xj, yj);
                            return
                        }
                        drawLine(xi, yi, xj, yj);
                        i += 20 * flag;

                        if (Math.abs(i) <= Math.abs(x1 - x2)) {
                            timer1 = window.setTimeout(function () {
                                draw();
                            }, 50);
                        }
                    }

                    draw();
                }

                /*k不存在，也就是垂直的情况*/
                function drawVerticalLine (x1, y1, x2, y2) {
                    let timer2 = null;
                    clearInterval(timer2);
                    let i = 0;
                    let flag = compare(y1, y2);

                    function draw () {
                        let yi = y1 + i;
                        let yj = y1 + i + 5 * flag;
                        drawLine(x1, yi, x2, yj);
                        i += 20 * flag;
                        if (Math.abs(i) <= Math.abs(y1 - y2)) {
                            timer2 = window.setTimeout(function () {
                                draw();
                            }, 50);
                        }
                    }
                    draw();
                }

                /*比较函数*/
                function compare (a, b) {
                    if (a < b) {
                        return 1;
                    } else {
                        return -1;
                    }
                }

                /*线条片段*/
                function drawLine (x1, y1, x2, y2) {
                    //线条发光
                    ctx.shadowColor = "#fff";
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 0;
                    ctx.shadowBlur = 15;

                    ctx.beginPath();
                    ctx.moveTo(x1, y1);
                    ctx.lineTo(x2, y2);
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = "#01bbf3";//线条颜色
                    ctx.stroke();
                    ctx.closePath();
                    ctx.fill();
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
.home-box {
	width: 100%;
	height: 100%;
	color: #ffffff;
	font-size: 32px;
	font-weight: 600;
	line-height: 38px;
	position: relative;
	background: #f2f2f2;

	canvas {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	span.chi {
		width: 90px;
		text-align: center;
		height: auto;
		animation: none;
	}

	.circle {
		width: 250px;
		height: 250px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		cursor: pointer;

		&.circle0 {
			width: 360px;
			height: 360px;
			left: 50%;
			top: 45%;
			transform: translateX(-50%) translateY(-50%);

			.chi {
				width: 130px;
				text-align: center;
				height: 92px;
				font-size: 30px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(181, 232, 255, 1);
				line-height: 46px;
				text-shadow: 0px 0px 2px rgba(137, 218, 255, 1);
			}
		}

		&.circle1 {
			left: 22%;
			top: 8%;
		}

		&.circle2 {
			left: 63%;
			top: 5%;
		}

		&.circle3 {
			left: 77%;
			top: 35%;
		}

		&.circle4 {
			overflow: hidden;
			left: 55%;
			top: 69%;
		}

		&.circle5 {
			left: 10%;
			top: 55%;
		}
	}
}

.lightCircle {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 200%;
	background-color: #01abf9;
	box-shadow: 0 0 10px 8px #01abf9;
}

.lightCircle2 {
	display: none\0;
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #01abf9;
	box-shadow: 0 0 20px 10px #01abf9;
	&.lightCircle20 {
		animation: Mylight0 5s infinite forwards;
	}
	&.lightCircle21 {
		animation: Mylight1 5s infinite forwards;
	}
	&.lightCircle22 {
		animation: Mylight2 5s infinite forwards;
	}
	&.lightCircle23 {
		animation: Mylight3 5s infinite forwards;
	}
	&.lightCircle24 {
		animation: Mylight4 5s infinite forwards;
	}
}
</style>
陪着月亮
关注
专栏目录
vue项目中贝塞尔曲线+canvas绘制两点之间的直线
vue+iview 动态渲染表格（vue.js结合iview插件）
04-22 2238
贝塞尔曲线绘制动态轨迹和canvas绘制两点之间的直线，两种方式（都是从网上找的），做下记录： <template> <div class="testBeiSaiEr"> <div class='a'></div> <div></div> <div class='b'></div> <!-- <canvas id="c1.
canvas 两点之间如何画弧
鲸落
11-02 1068
首先，我们需明确一点，如果只知道两个点的话是无法画弧的 canvas 画弧，需要半径r，圆心o(x,y)，开始的角度startDeg，结束的角度endDeg 做了一个画弧度的小需求，顺便回顾了下三角函数，所以在此记录一下。 简单介绍一下我的那个小需求吧 大概是这样，知道a和b，需要画出图中绿色的弧
Canvas学习：绘制圆和圆弧
wulixiaoxiao1的博客
03-18 7906
圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。 与圆和圆弧相关的基础知识 在学习如何绘制圆和圆弧之前，有一些相关的基础知识有必要先进行了解。 角度旋转角度和弧度
canvas画点连线
weixin_38655115的博客
07-19 1922
vue配合canvas画点连线，
vue+canvas绘制圆并连线
qq_59599812的博客
08-02 1098
概述：点击右边图例=》点击画布进行绘制+》点击一键连线。第一步：点击右边图例，两个图例各设置一个开关。注：可能有的括号符号不全，请注意检查，前期工作创建canvas实例。第二步：点击画布进行绘制。
canvas根据坐标点绘制图形
V_AYA_V的博客
04-02 4727
有一需求，需要根据后台返回的坐标集在canvas中绘制图形。由于canvas使用不多，简单记录学习一下。整个需求实现主要分为三个部分 一.前端等比展示a4纸大小canvas画布 1. A4纸大小：210×297mm一般在ps中可以根据分辨率的不同转换成不同的px单位： 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595 当分辨率是120像素/英寸时，A4纸像素长宽分别是2105×1487 当分辨率是150像素/英寸时，A4纸像素长宽分别是1754×1240 当分辨率是300像素/英寸时，A.
canvas绘制坐标点连线/动态改变宽度导致canvas渲染失败
qq_38143787的博客
08-19 899
文章目录一、有关canvas二、绘制图案三、放大缩小功能四、canvas清空画布的三种方式五、动态改变宽度导致canvas渲染失败 现在需要根据坐标点绘制对应的连线，于是考虑采用canvas来完成对应的功能。 原图： 效果图： 一、有关canvas 是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行。Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。如
【绘制】HTML5 Canvas线段端点和连接点的绘制（图文、示例）
苏一恒
09-02 3236
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 线段介绍 Canvas中绘图环境与线段有关的属性： 属性 描述 类型 取值范围 默认值 lineWi...
canvas绘制动画小球连线
屈小康
12-20 367
canvas
canvas绘制任意两点的动态直线
qq_21058391的博客
01-15 7171
Canvas draw Dynamic Lines start point end point *{ margin:0; padding:0; box-sizing:border-box; } .canvas-container{ position:absolute; width:1
canvas连线及箭头绘制
03-18
canvas连线及箭头绘制
canvas实现js、html连线
02-19
同时，我们可以添加条件判断来支持左右或上下连线： ```javascript canvas.addEventListener('mousedown', function(event) { // 记录起点 var startX = event.clientX; var startY = event.clientY; }); ...
canvas里面如何基于随机点绘制一个多边形的方法
12-13
在HTML5的Canvas API中，绘制基于随机点的多边形是一个有趣且具有挑战性的任务。这个过程涉及到几何计算和图形渲染技术。首先，我们从问题的起因开始，作者在阅读《HTML5+Javascript动画基础》时，学习了如何用弹簧...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1141
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 91
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
前端基础面试题·第四篇——Vue（其二）
最新发布
2301_76380626的博客
10-08 652
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1228
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 996
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值