【Canvas】使用canvas实现多点连线效果

最新推荐文章于 2024-04-08 20:58:26 发布
最新推荐文章于 2024-04-08 20:58:26 发布
阅读量1k 收藏 10
点赞数 14
分类专栏： 前端 vue3 文章标签： html5 前端 vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231248/article/details/135548218
版权
前端 同时被 2 个专栏收录
51 篇文章 1 订阅
订阅专栏
vue3
31 篇文章 2 订阅
订阅专栏

前言

在浏览网站时，有的时候会看到网站背景有许多点，这些点在一定范围内会连线，感觉很好玩。
我实现了一个简单版的，记录下这次的实现过程。
在这里插入图片描述
动态效果
在这里插入图片描述

实现

实现思路

  1. 创建画布，设置一些全局属性
  2. 生成点，并画点
  3. 利用requestAnimationFrame更新点，并画点，同时判断各点间的距离。
    4.完成。

实现过程

创建画布，设置一些全局属性。

这一步主要考虑画布大小位置等，点的大小半径以及移动速度，生成点的个数。

  const canvas: Ref<HTMLCanvasElement | null> = ref(null);
  const dotCoord: Coord[] = [];
  let dotCoordFrame: CoordFrame[] = [];
  const cW = 800, //  canvas宽
    cH = 400, //  canvas高
    oX = cW / 2, //  中心点x
    oY = cH / 2, //  中心点y
    r = 5, //  点半径
    dotNumber = 50, //  点数
    rangeLineV = 100, //  连线范围
    moveV = 0.5; //  初始移动速度
  let frameA: number | null = null;
  onMounted(() => {
    initCanvas();
    canvas.value?.addEventListener('mouseenter', cancelFrame);
    canvas.value?.addEventListener('mouseleave', startFrame);
  });
  onUnmounted(() => {
    canvas.value?.removeEventListener('mouseenter', cancelFrame);
    canvas.value?.removeEventListener('mouseleave', startFrame);
  });
  const initCanvas = () => {
    if (canvas.value) {
      canvas.value.width = cW;
      canvas.value.height = cH;
      console.log(canvas.value);
      randomCreateDotCoord(dotNumber);
      createStart();
    }
  };

生成点，并画点

初始化随机点时要保证点坐标不重复。

//  随机生成指定点坐标(坐标不重复)
  const randomCreateDotCoord = (num = 1) => {
    function randomDot(): Coord {
      let aX = Math.floor(Math.random() * (cW - 2 * r)) + r;
      let aY = Math.floor(Math.random() * (cH - 2 * r)) + r;
      return {
        x: aX,
        y: aY,
        r,
      };
    }

    let i = 0;
    dotCoord.length = 0;
    while (i < num) {
      let dot = randomDot();
      if (!jumpDotIsCollision(dot, dotCoord)) {
        dotCoord.push(dot);
        i++;
      }
    }
  };

使用 requestAnimationFrame

使用帧动画让圆点坐标实时改变，更新canvas，更新时记得清空上一帧。

//帧动画函数
  function animationFrame() {
    let ctx = canvas.value?.getContext('2d');
    if (!ctx) return;
    ctx.clearRect(0, 0, cW, cH);

    //  更新点
    dotCoordFrame = dotCoordFrame.map((dot) => {
      return getFrameV(dot);
    });
    dotCoordFrame.forEach(({ fx, fy, r }) => {
      drawArc(ctx, {
        x: fx,
        y: fy,
        r,
      });
    });
    //  点如在一定范围内则连线
    dotCoordFrame.forEach((dot) => {
      dotCoordFrame.forEach((dot2) => {
        if (calcHypotenuse(dot.fx - dot2.fx, dot.fy - dot2.fy) < rangeLineV) {
          drawRangleLine(ctx, { x: dot.fx, y: dot.fy }, { x: dot2.fx, y: dot2.fy });
        }
      });
    });
    frameA = window.requestAnimationFrame(animationFrame);
  }
  const startFrame = () => {
    frameA = window.requestAnimationFrame(animationFrame);
  };
  const cancelFrame = () => {
    window.cancelAnimationFrame(frameA as number);
  };

完整代码

使用vue3写的，逻辑都在ts里。

<template>
  <div class="start-alignment">
    <h3>星星连线</h3>
    <div>
      <canvas class="canvas" ref="canvas"></canvas>
    </div>
  </div>
</template>
<script lang="ts" setup>
  interface CoordBase {
    x: number;
    y: number;
  }
  interface Coord extends CoordBase {
    r: number;
  }
  interface CoordFrame extends Coord {
    fx: number;
    fy: number;
    xAdd: boolean; //  1
    yAdd: boolean;
    v: number; //  移动速度
  }
  type Ctx = CanvasRenderingContext2D | null | undefined;
  const canvas: Ref<HTMLCanvasElement | null> = ref(null);
  const dotCoord: Coord[] = [];
  let dotCoordFrame: CoordFrame[] = [];
  const cW = 800, //  canvas宽
    cH = 400, //  canvas高
    oX = cW / 2, //  中心点x
    oY = cH / 2, //  中心点y
    r = 5, //  点半径
    dotNumber = 50, //  点数
    rangeLineV = 100, //  连线范围
    moveV = 0.5; //  初始移动速度
  let frameA: number | null = null;
  onMounted(() => {
    initCanvas();
    canvas.value?.addEventListener('mouseenter', cancelFrame);
    canvas.value?.addEventListener('mouseleave', startFrame);
  });
  onUnmounted(() => {
    canvas.value?.removeEventListener('mouseenter', cancelFrame);
    canvas.value?.removeEventListener('mouseleave', startFrame);
  });
  const initCanvas = () => {
    if (canvas.value) {
      canvas.value.width = cW;
      canvas.value.height = cH;
      console.log(canvas.value);
      randomCreateDotCoord(dotNumber);
      createStart();
    }
  };
  //  随机生成指定点坐标(坐标不重复)
  const randomCreateDotCoord = (num = 1) => {
    function randomDot(): Coord {
      let aX = Math.floor(Math.random() * (cW - 2 * r)) + r;
      let aY = Math.floor(Math.random() * (cH - 2 * r)) + r;
      return {
        x: aX,
        y: aY,
        r,
      };
    }

    let i = 0;
    dotCoord.length = 0;
    while (i < num) {
      let dot = randomDot();
      if (!jumpDotIsCollision(dot, dotCoord)) {
        dotCoord.push(dot);
        i++;
      }
    }
  };
  //  两点是否碰撞
  function jumpDotIsCollision(dot: Coord, arr: any[]) {
    for (let i = 0; i < arr.length; i++) {
      let cDot = arr[i];
      let c = calcHypotenuse(cDot.x - dot.x, cDot.y - dot.y);
      if (c <= cDot.r + dot.r) {
        return true;
      }
    }

    return false;
  }
  //  生成星星
  const createStart = () => {
    let ctx = canvas.value?.getContext('2d');
    dotCoord.forEach((dot) => {
      drawArc(ctx, dot);
    });
    //  初始化动态点数组
    dotCoordFrame.length = 0;
    dotCoordFrame.push(
      ...dotCoord.map((dot) => {
        return {
          ...dot,
          fx: dot.x,
          fy: dot.y,
          xAdd: dot.x > oX ? true : false,
          yAdd: dot.y > oY ? true : false,
          v: moveV,
        };
      }),
    );
    startFrame();
  };
  //帧动画函数
  function animationFrame() {
    let ctx = canvas.value?.getContext('2d');
    if (!ctx) return;
    ctx.clearRect(0, 0, cW, cH);

    //  更新点
    dotCoordFrame = dotCoordFrame.map((dot) => {
      return getFrameV(dot);
    });
    dotCoordFrame.forEach(({ fx, fy, r }) => {
      drawArc(ctx, {
        x: fx,
        y: fy,
        r,
      });
    });
    //  点如在一定范围内则连线
    dotCoordFrame.forEach((dot) => {
      dotCoordFrame.forEach((dot2) => {
        if (calcHypotenuse(dot.fx - dot2.fx, dot.fy - dot2.fy) < rangeLineV) {
          drawRangleLine(ctx, { x: dot.fx, y: dot.fy }, { x: dot2.fx, y: dot2.fy });
        }
      });
    });
    frameA = window.requestAnimationFrame(animationFrame);
  }
  const startFrame = () => {
    frameA = window.requestAnimationFrame(animationFrame);
  };
  const cancelFrame = () => {
    window.cancelAnimationFrame(frameA as number);
  };

  //  根据坐标画dot
  const drawArc = (ctx: Ctx, dot: Coord) => {
    if (!ctx) return;

    const { x, y, r } = dot;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);

    ctx.fill();
  };
  //  两点画线
  const drawRangleLine = (ctx: Ctx, x1: CoordBase, x2: CoordBase) => {
    if (!ctx) return;
    ctx.beginPath();
    ctx.moveTo(x1.x, x1.y);
    ctx.lineTo(x2.x, x2.y);
    ctx.stroke();
  };
  //处理坐标下一帧移动值
  const getFrameV = (dot: CoordFrame): CoordFrame => {
    let { x, xAdd, yAdd, fx, fy, y, v } = dot;
    let nx = fx,
      ny = fy;
    //  边缘机制-start

    {
      if (fx > cW || fx < 0) {
        xAdd = !xAdd;
        v = moveV; //  重新赋初始初始速度
      }

      if (fy > cH || fy < 0) {
        yAdd = !yAdd;
        v = moveV;
      }
    }
    // end
    //  碰撞机制
    {
      let arr = dotCoordFrame.map((v) => ({ x: v.fx, y: v.fy, r })).filter((v) => v.x !== fx);
      let isUse = jumpDotIsCollision(
        {
          x: nx,
          y: ny,
          r,
        },
        arr,
      );

      if (isUse) {
        xAdd = !xAdd;
        yAdd = !yAdd;
        v = moveV;
      }
    }

    if (xAdd) {
      nx += v;
    } else {
      nx -= v;
    }
    if (yAdd) {
      ny += v;
    } else {
      ny -= v;
    }
    //  改变下次的速度
    const fn = () => {
      if (v >= 0.1) v -= 0.1;
      setTimeout(fn, 200);
    };
    setTimeout(fn, 200);
    return {
      x: fx,
      y: fy,
      xAdd,
      yAdd,
      fx: nx,
      fy: ny,
      r,
      v,
    };
  };

  /**
   *  勾股定理
   * @param a  number
   * @param b
   * @returns
   */
  function calcHypotenuse(a: number, b: number) {
    return Math.sqrt(a * a + b * b);
  }
</script>
<style lang="scss" scoped>
  .canvas {
    border: 1px solid #000;
  }
</style>

结语

这是一个特别简单的圆点连线canvas动画。如果你有兴趣，可以根据此基础上扩展出更好玩的互动效果，点击改变中心点，然后圆点朝点击坐标缓动等等。
通过这次实现，较为重要的是：

  • 圆点的数据结构（可以扩展圆点样式）。
  • 移动轨迹（方向、速度）。
  • 圆点数据有变化时，要及时更新画布。

可优化点：是碰撞判断逻辑、圆点数据处理、requestAnimationFrameAPI封装一个可以指定ms数更新的函数（这样圆点数据变多浏览器不会报超时警告，根据实际数据处理速度动态变化画布更新时机）。

ZSK6
关注
  • 14
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【SVG】前端-不依靠第三方包怎么画连线???
九日的博客
03-15 1455
在Web开发中，我们经常会遇到需要在页面上绘制图形或者实现一些图形交互的场景。SVG（Scalable Vector Graphics）作为一种用于描述二维图形的XML标记语言，在这方面提供了极大的便利。本文将以一个具体的例子——如何使用SVG来实现连线功能，来介绍SVG的使用方法。
canvas在背景图上画点连成不规则多边形
qq_42023279的博客
07-14 1720
用canvas画点，多个点连成一个不规则的图形 <div class="workshopCanvas" @click="selectPoint"> <img style="position: absolute;left: 0px;top: 0px;width: 660px;height: 260px;" :src="ctxPic" /> <canvas style="position: absolute;" id="myCanvas" w
canvas连接两点的轨迹动画
tangyuhui
08-19 5023
(function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x &lt; vendors.length &amp;&amp; !window.requestAnimationFrame; ++x) { window.requestAn...
【canvas】canvas基础使用（二）：使用canvas路径绘制点、线、面
最新发布
qq_2511276124的博客
04-08 1480
学习canvas路径绘制点、线、面的api。
html5圆点连线,HTML5 Canvas两点之间的折线连接动画
weixin_39924779的博客
06-03 911
JavaScript语言：JaveScriptBabelCoffeeScript确定let c = document.getElementById("theCanvas");let ctx = c.getContext("2d"),halfWidth = window.innerWidth / 2,halfHeight = window.innerHeight / 2;ctx.canvas.wid...
canvas在两点之间画线
热门推荐
陈悕的专栏
01-13 1万+
最新需要做一个表格，有坐标轴，轴上有点，点间连线，想到了canvas，查找官方API，发现还是很简单的，不过毕竟是第一次接触html5，画线也费些时间。 先说说canvas，初始化要设置宽高，而且不能用样式表，必须在canvas的属性中设置，然后调用API画线即可。代码如下： var c = document.getElementById("myCanvas");//初始化 var ctx =
前端小技巧之div标签连线
yunduanaoligei的博客
11-09 2892
今天分享下”前端小技巧之div标签连线“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。 往常我们画一条横线直接用标签即可，当画一条竖线的时候发现找不到标签。在网上查找了一下资料，大致推荐用js来做。小弟比较偏执想用纯css来做，最终找到了解决方法，下面我就来分享一下
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 3979
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
使用js和canvas实现时钟效果
11-19
使用js和canvas写一个时钟，供大家参考，具体内容如下 <!DOCTYPE html>` <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
Canvas实现动态的雪花效果
08-31
本文主要分享Canvas实现动态的雪花效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
canvas实现js、html连线
02-19
基于canvas实现js、html连线，可左右连线，也可上下连线，html连线，
canvas简单连线动画的实现代码
12-28
前言：canvas动画入门系列之简单连线动画。虽然简单，但连线动画应用场景还挺多，因此做了个小demo，一通百通。 step1：绘制点 首先创建个标签 设置几个点的坐标 const points = [ [200, 100], //上 [300, 200], //右 [100, 200], //左 [200, 100], //上 [200, 300], //下 [100, 200], //左 [300, 200], /
svg.js和jquery实现连线功能
09-01
svg.js和jquery实现连线功能，（html网页）。svg.js和jquery实现连线功能。
canvas实现刮刮卡效果
08-31
使用Canvas实现刮刮卡效果 Canvas是HTML5中一个非常强大的标签，它可以用来绘制图形、实现动画和游戏等。今天我们要介绍的是使用Canvas实现刮刮卡效果的实例。 什么是刮刮卡效果？ 刮刮卡效果是一种常见的交互...
使用canvas实现粒子流动效果.zip
07-05
使用canvas实现粒子流动效果示例的源代码，含有非常详细的代码注释。
Javascript利用canvas绘制两点间曲线、箭头等
zhaoyang314的博客
10-24 756
Javascript利用canvas，在两点间绘制曲线，矩形，并且在矩形中绘制文字，实现居中对齐，同时实现了箭头绘制，效果如图: 二、css代码如下： 三、Javascript代码如下 ok，代码就是如此，完整代码如下：
canvas四个点画矩形，中垂线，以及顶点拖拽
weixin_43843679的博客
04-19 1586
场景： 已知四个点，画出矩形，并且计算出每个中垂线，并加箭头，标识符，点击四个顶点还能拖拽进行变动。 .vue <!-- canvas --> <template> <div class="content"> <div class="name-content" @click="clickName">设备一</div> <!-- 背景图 --> <img v-if="bgIm
Vue 使用jsPlumb 实现连线绘图
银滴子的博客
01-30 5342
Vue 使用jsPlumb 实现连线绘图
使用canvas实现卡片展开效果
06-12
要实现卡片展开效果，可以使用canvas绘制卡片的背景和内容，并通过动画实现展开效果。以下是一个简单的实现步骤： 1. 创建一个canvas元素，并设置宽度和高度。 2. 绘制卡片的背景和内容，可以使用canvas提供的绘制图形和文本的API。 3. 添加点击事件，当用户点击卡片时，启动动画。 4. 在动画中，通过改变卡片的宽度和高度，实现卡片展开的效果。 以下是一个简单的示例代码： HTML部分： ``` <canvas id="card" width="300" height="200"></canvas> ``` JavaScript部分： ``` // 获取canvas元素 var canvas = document.getElementById('card'); // 获取绘制上下文 var ctx = canvas.getContext('2d'); // 绘制卡片背景和内容 // ... // 添加点击事件 canvas.addEventListener('click', function() { // 启动动画 var width = canvas.width; var height = canvas.height; var step = 10; var interval = setInterval(function() { if (width < 500) { width += step; canvas.width = width; } else { clearInterval(interval); } }, 10); }); ``` 需要注意的是，该示例只是一个简单的实现，实际应用中可能需要更复杂的动画效果和交互逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值