使用canvas画迁徙线并加上动态效果与小飞机图标

最新推荐文章于 2024-05-17 17:02:30 发布
最新推荐文章于 2024-05-17 17:02:30 发布
阅读量1.3k 收藏 10
点赞数 4
分类专栏： canvas相关 文章标签： canvas js svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xt_XiTu/article/details/112937798
版权

首先在页面中放上地图图片，并建立三个canvas标签，分别用于点、迁徙线、动态效果

   <div class="mapBox">
      <div class="map">
        <img src="@/assets/shanxi.svg" alt="">
      </div>
            <!-- 线 -->
      <canvas id="canvas" class="canvas"></canvas>
      <!-- 点 -->
      <canvas id="canvasPoint" class="canvas"></canvas>
      <!-- 动态效果 -->
      <canvas id="canvasMove" class="canvas"></canvas>
    </div>

在这里插入图片描述
初始化canvas

初始化时，需要给各个canvas画布一个确定的宽高，否则画布会使用固定的宽300高150，这时如果另外使用的css给canvas画布制定宽高样式，会导致画布被拉伸，里面内容也会跟着被拉伸

  data() {
    return {
      canvas: null,
      canvasPoint: null,
      canvasMove: null,
      center: {}, // 迁徙线起点位置
      directionArr: [], // 迁徙线终点位置
      endKeep: [], // 保存一下各个迁徙线起点
      end: [], // 运动中的各迁徙线时间p时所在位置
      p: 0, // 时间记录，每到1时变为0
      step: 0.005, // 时间每次递增量
      animationSpeed: 0.03, // 点动画效果圆圈每次增加量
      dotNumber: 25, // 动画迁徙线 动态的线的部分由多少个点组成
      rate: 1.053, // 1.033 贝塞尔曲线计算时用到的参数
      requestAnimationFrameName: '',
      compareData: [ // 用于临时计算各终点位置的参数
        { x: 0.65, y: 0.89 },
        { x: 0.094, y: 0.76 },
        { x: 0.95, y: 0.28 },
        { x: 0.19, y: 0.19 },
        { x: 0.49, y: 0.08 }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 获取需要画布达到的宽高数据
      const mapBox = document.getElementsByClassName('mapBox')[0];
      const width = mapBox.offsetWidth;
      const height = mapBox.offsetHeight;
      // 拿到三个画布，给定宽高
      const canvas = document.getElementById('canvas');
      const canvasPoint = document.getElementById('canvasPoint');
      const canvasMove = document.getElementById('canvasMove');
      canvas.width = width;
      canvas.height = height;
      canvasPoint.width = width;
      canvasPoint.height = height;
      canvasMove.width = width;
      canvasMove.height = height;
      this.canvas = canvas.getContext('2d');
      this.canvasPoint = canvasPoint.getContext('2d');
      this.canvasMove = canvasMove.getContext('2d');
      // 找到所有迁徙线起点，项目中我的起点是太原，所以大概找到一下
      this.center = {
        x: Math.ceil(width * 0.52),
        y: Math.ceil(height * 0.48)
      };
      // 各线终点 以下仅为参考，具体以项目要求为准
      for (let i = 0; i<= 4; i++) {
        this.directionArr[i] = {
          x: Math.ceil(width * compareData[index].x),
          y: Math.ceil(height * compareData[index].y)
        }
        this.endKeep[index] = {
          x: this.center.x,
          y: this.center.y
        };
      }
      this.end = JSON.parse(JSON.stringify(this.endKeep));
    },

画布一：固定的迁徙线画布

drawAllLine() {
  // 根据每个点分别画线
  this.directionArr.forEach(item => {
    this.drawLine(item);
  });
},
drawLine({ x, y }) {
      this.canvas.beginPath();
      this.canvas.moveTo(this.center.x, this.center.y); // 起始点（x,y）
      // 计算贝塞尔曲线控制点位置
      const coord = this.calcCp([x, y], [this.center.x, this.center.y]);
      this.canvas.quadraticCurveTo(coord.x, coord.y, x, y); //创建二次贝塞尔曲线
      // 线宽1
      this.canvas.lineWidth = 1;
      // 线颜色
      this.canvas.strokeStyle = '#5cb85c';
      this.canvas.stroke();
      this.canvas.closePath();
},
/*
 * num: 要被转换的数字
 * exnum: 当前中心坐标 不一定是x还是y
 */
calcCp(start, end) {
  let middleX = 0;
  let middleY = 0;
  if (start[0] > end[0] && start[1] > end[1]) {
    middleX = ((start[0] + end[0]) / 2) * this.rate;
    middleY = ((start[1] + end[1]) / 2) * (2 - this.rate);
  }
  if (start[0] > end[0] && start[1] < end[1]) {
    middleX = ((start[0] + end[0]) / 2) * this.rate;
    middleY = ((start[1] + end[1]) / 2) * this.rate;
  }
  if (start[0] < end[0] && start[1] > end[1]) {
    middleX = ((start[0] + end[0]) / 2) * (2 - this.rate);
    middleY = ((start[1] + end[1]) / 2) * (2 - this.rate);
  }
  if (start[0] < end[0] && start[1] < end[1]) {
    middleX = ((start[0] + end[0]) / 2) * (2 - this.rate);
    middleY = ((start[1] + end[1]) / 2) * this.rate;
  }
  return {
    x: middleX,
    y: middleY
  };
},

在这里插入图片描述

画布二：各终点效果

data中增加关于点的一些参数

      radius: 1, // 航路点半径
      radiusRing: 1,
      radiusRingMin: 1,
      radiusRingMax: 25, // 最大设为25时，涟漪消失的不会很突兀
      dotColor: '243,254,193',
      ringColor: 'rgba(236,210,32,0.5)'

还需要增加控制动画执行的方法

    drawPoint(x1, y1) {
      // 最里圈小圆
      this.canvasPoint.fillStyle = `rgba(${this.dotColor}, 1)`;
      this.canvasPoint.beginPath();
      this.canvasPoint.arc(x1, y1, this.radius, 0, 2 * Math.PI);
      this.canvasPoint.closePath();
      this.canvasPoint.fill();

      // 外层小圆
      this.canvasPoint.fillStyle = `rgba(${this.dotColor}, 0.3)`;
      this.canvasPoint.beginPath();
      this.canvasPoint.arc(x1, y1, this.accAdd(this.radius, 3), 0, 2 * Math.PI);
      this.canvasPoint.closePath();
      this.canvasPoint.fill();

      // 以下为涟漪部分
      if (this.radiusRing >= this.radiusRingMax) {
        this.radiusRing = this.radiusRingMin;
      }
      this.canvasPoint.fillStyle = this.ringColor;
      this.canvasPoint.beginPath();
      this.canvasPoint.arc(x1, y1, this.radiusRing, 0, 2 * Math.PI);
      this.canvasPoint.closePath();
      this.canvasPoint.fill();
      // this.radiusRing += 0.03;
      this.radiusRing += this.animationSpeed;
      this.ringColor =
        this.ringColor
          .split(',')
          .slice(0, 3)
          .join(',') +
        ',' +
        (0.5 - (this.radiusRing - this.radiusRingMin) * 0.02) +
        ')';
    },
    drawMove() {
      cancelAnimationFrame(this.requestAnimationFrameName);
      // 动态线的画布
      // 点的画布
      this.canvasPoint.clearRect(0, 0, 10000, 10000);
      this.drawPoint(this.center.x, this.center.y);
      this.directionArr.forEach((item) => {
        this.drawPoint(item.x, item.y);
      });
      this.p = this.accAdd(this.p, this.step);
      this.requestAnimationFrameName = requestAnimationFrame(this.drawMove);
    },

在这里插入图片描述
画布三：奔跑的动态线条以及小飞机

此处需要增加一个img标签，放上小飞机图标

目前依然存在飞机图标飞行角度不准确问题，以后有时间再调整

js代码如下

  mounted() {
    this.plane = document.getElementById('airportIcon');
    this.init();
  },
  drawMivie(index) {
      // 获取当前时间p时贝塞尔曲线的x, y点
      const coord = this.calcCp(
        [this.directionArr[index].x, this.directionArr[index].y],
        [this.center.x, this.center.y]
      );
      const x = this.calcRightNow(this.p, this.center.x, coord.x, this.directionArr[index].x);
      const y = this.calcRightNow(this.p, this.center.y, coord.y, this.directionArr[index].y);
      this.canvasMove.beginPath();
      this.canvasMove.moveTo(this.end[index].x, this.end[index].y);
      this.canvasMove.lineTo(x, y);
      const gnt1 = this.canvasMove.createLinearGradient(this.end[index].x, this.end[index].y, x, y);
      gnt1.addColorStop(0, '#fff');
      gnt1.addColorStop(1, '#ECD220');
      this.canvasMove.strokeStyle = gnt1;
      this.canvasMove.lineWidth = 1;
      this.canvasMove.stroke();
      // this.canvasMove.closePath();
      for (var i = 0; i < this.dotNumber; i++) {
        let _t = this.p - this.step * i * 2 >= 0 ? this.p - this.step * i * 2 : 1 + (this.p - this.step * i * 2);
        const coord1 = this.calcCp(
          [this.directionArr[index].x, this.directionArr[index].y],
          [this.center.x, this.center.y]
        );
        const x1 = this.calcRightNow(_t, this.center.x, coord1.x, this.directionArr[index].x);
        const y1 = this.calcRightNow(_t, this.center.y, coord1.y, this.directionArr[index].y);
        this.canvasMove.fillStyle = 'rgba(' + this.dotColor + ',' + (1 - (1 / this.dotNumber) * i) + ')';
        this.canvasMove.beginPath();
        this.canvasMove.arc(x1, y1, 1, 0, 2 * Math.PI);
        this.canvasMove.fill();
        this.canvasMove.closePath();
      }
      // 加个小飞机图标飞起来
      const xx = this.calcRightNow(this.p + this.step * 3, this.center.x, coord.x, this.directionArr[index].x);
      const yy = this.calcRightNow(this.p + this.step * 2, this.center.y, coord.y, this.directionArr[index].y);
      const img = this.createIcon(xx, yy, index);
      this.canvasMove.drawImage(img, xx - 8, yy - 8);
      this.end[index].x = x;
      this.end[index].y = y;
    },
    // 获取当前时间p时贝塞尔曲线的x, y点, 此方法不区分x y
    calcRightNow(p, start, controlPoint, end) {
      return Math.pow(1 - p, 2) * start + 2 * p * (1 - p) * controlPoint + Math.pow(p, 2) * end;
    },
    getAngle(x, y) {
      var radian = Math.atan(y / x); // 弧度
      var angle = Math.floor(180 / (Math.PI / radian)); // 弧度转角度
      if (x < 0) {
        // x小于0的时候加上180°，即实际角度
        angle = angle + 180;
      }
      return angle;
    },
    createIcon(x, y, index) {
      const deg = this.getAngle(x - this.end[index].x, y - this.end[index].y);
      const c = document.createElement('canvas');
      c.width = 16;
      c.height = 16;
      const cCtx = c.getContext('2d');
      cCtx.translate(8, 8);
      if (y < this.end[index].y && ((Math.abs(deg) > 80 && Math.abs(deg) < 91) || (deg > 240 && deg < 270))) {
        cCtx.drawImage(this.plane, -8, -8);
      } else if (x >= this.end[index].x && y < this.end[index].y) {
        cCtx.rotate(((-deg + 20) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 20) * Math.PI) / 180);
      } else if (x < this.end[index].x && y < this.end[index].y) {
        cCtx.rotate(((-deg + 160) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 160) * Math.PI) / 180);
      } else if (x < this.end[index].x && y >= this.end[index].y) {
        cCtx.rotate(((-deg + 45) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 45) * Math.PI) / 180);
      } else {
        cCtx.rotate(((225 - deg) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 225) * Math.PI) / 180);
      }
      return c;
    },
    drawMove() {
      cancelAnimationFrame(this.requestAnimationFrameName);
      // 动态线的画布
      this.canvasMove.clearRect(0, 0, 10000, 10000);
      if (this.p >= 1) {
        this.p = this.step;
        this.end = JSON.parse(JSON.stringify(this.endKeep));
      }
      // 点的画布
      this.canvasPoint.clearRect(0, 0, 10000, 10000);
      this.drawPoint(this.center.x, this.center.y);
      this.directionArr.forEach((item, index) => {
        this.drawMivie(index);
        this.drawPoint(item.x, item.y);
      });
      this.p = this.accAdd(this.p, this.step);
      this.requestAnimationFrameName = requestAnimationFrame(this.drawMove);
    },

在这里插入图片描述

以下为完整代码

<template>
  <div class="box">
    <div class="mapBox">
      <div class="map">
        <img src="@/assets/shanxi.svg" alt="">
      </div>
      <!-- 线 -->
      <canvas id="canvas" class="canvas"></canvas>
      <!-- 点 -->
      <canvas id="canvasPoint" class="canvas"></canvas>
      <!-- 动态效果 -->
      <canvas id="canvasMove" class="canvas"></canvas>
      <img class="airport" id="airportIcon" src="@/assets/airport.svg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'homePage',
  data() {
    return {
      canvas: null,
      canvasPoint: null,
      canvasMove: null,
      center: {}, // 迁徙线起点位置
      directionArr: [], // 迁徙线终点位置
      endKeep: [], // 保存一下各个迁徙线起点
      end: [], // 运动中的各迁徙线时间p时所在位置
      p: 0, // 时间记录，每到1时变为0
      step: 0.005, // 时间每次递增量
      animationSpeed: 0.03, // 点动画效果圆圈每次增加量
      dotNumber: 25, // 动画迁徙线 动态的线的部分由多少个点组成
      rate: 1.053, // 1.033 贝塞尔曲线计算时用到的参数
      requestAnimationFrameName: '',
      compareData: [ // 用于临时计算各终点位置的参数
        { x: 0.65, y: 0.89 },
        { x: 0.094, y: 0.76 },
        { x: 0.95, y: 0.28 },
        { x: 0.19, y: 0.19 },
        { x: 0.49, y: 0.08 }
      ],
      radius: 1, // 航路点半径
      radiusRing: 1,
      radiusRingMin: 1,
      radiusRingMax: 25, // 最大设为25时，涟漪消失的不会很突兀
      dotColor: '243,254,193',
      ringColor: 'rgba(236,210,32,0.5)',
      plane: null
    };
  },
  mounted() {
    this.plane = document.getElementById('airportIcon');
    this.init();
  },
  methods: {
    init() {
      // 获取需要画布达到的宽高数据
      const mapBox = document.getElementsByClassName('mapBox')[0];
      const width = mapBox.offsetWidth;
      const height = mapBox.offsetHeight;
      // 拿到三个画布，给定宽高
      const canvas = document.getElementById('canvas');
      const canvasPoint = document.getElementById('canvasPoint');
      const canvasMove = document.getElementById('canvasMove');
      canvas.width = width;
      canvas.height = height;
      canvasPoint.width = width;
      canvasPoint.height = height;
      canvasMove.width = width;
      canvasMove.height = height;
      this.canvas = canvas.getContext('2d');
      this.canvasPoint = canvasPoint.getContext('2d');
      this.canvasMove = canvasMove.getContext('2d');
      // 找到所有迁徙线起点，项目中我的起点是太原，所以大概找到一下
      this.center = {
        x: Math.ceil(width * 0.52),
        y: Math.ceil(height * 0.48)
      };
      // 各线终点 以下仅为参考，具体以项目要求为准
      for (let i = 0; i <= 4; i++) {
        this.directionArr[i] = {
          x: Math.ceil(width * this.compareData[i].x),
          y: Math.ceil(height * this.compareData[i].y)
        }
        this.endKeep[i] = {
          x: this.center.x,
          y: this.center.y
        };
      }
      this.end = JSON.parse(JSON.stringify(this.endKeep));
      // 画线开始
      this.drawAllLine();
    },
    drawAllLine() {
      // 根据每个点分别画线
      this.directionArr.forEach(item => {
        this.drawLine(item);
      });
      this.drawMove();
    },
    drawLine({ x, y }) {
      this.canvas.beginPath();
      this.canvas.moveTo(this.center.x, this.center.y); // 起始点（x,y）
      // 计算贝塞尔曲线控制点位置
      const coord = this.calcCp([x, y], [this.center.x, this.center.y]);
      this.canvas.quadraticCurveTo(coord.x, coord.y, x, y); //创建二次贝塞尔曲线
      // 线宽1
      this.canvas.lineWidth = 1;
      // 线颜色
      this.canvas.strokeStyle = '#5cb85c';
      this.canvas.stroke();
      this.canvas.closePath();
    },
    drawPoint(x1, y1) {
      // 最里圈小圆
      this.canvasPoint.fillStyle = `rgba(${this.dotColor}, 1)`;
      this.canvasPoint.beginPath();
      this.canvasPoint.arc(x1, y1, this.radius, 0, 2 * Math.PI);
      this.canvasPoint.closePath();
      this.canvasPoint.fill();

      // 外层小圆
      this.canvasPoint.fillStyle = `rgba(${this.dotColor}, 0.3)`;
      this.canvasPoint.beginPath();
      this.canvasPoint.arc(x1, y1, this.accAdd(this.radius, 3), 0, 2 * Math.PI);
      this.canvasPoint.closePath();
      this.canvasPoint.fill();

      // 以下为涟漪部分
      if (this.radiusRing >= this.radiusRingMax) {
        this.radiusRing = this.radiusRingMin;
      }
      this.canvasPoint.fillStyle = this.ringColor;
      this.canvasPoint.beginPath();
      this.canvasPoint.arc(x1, y1, this.radiusRing, 0, 2 * Math.PI);
      this.canvasPoint.closePath();
      this.canvasPoint.fill();
      // this.radiusRing += 0.03;
      this.radiusRing += this.animationSpeed;
      this.ringColor =
        this.ringColor
          .split(',')
          .slice(0, 3)
          .join(',') +
        ',' +
        (0.5 - (this.radiusRing - this.radiusRingMin) * 0.02) +
        ')';
    },
    drawMivie(index) {
      // 获取当前时间p时贝塞尔曲线的x, y点
      const coord = this.calcCp(
        [this.directionArr[index].x, this.directionArr[index].y],
        [this.center.x, this.center.y]
      );
      const x = this.calcRightNow(this.p, this.center.x, coord.x, this.directionArr[index].x);
      const y = this.calcRightNow(this.p, this.center.y, coord.y, this.directionArr[index].y);
      this.canvasMove.beginPath();
      this.canvasMove.moveTo(this.end[index].x, this.end[index].y);
      this.canvasMove.lineTo(x, y);
      const gnt1 = this.canvasMove.createLinearGradient(this.end[index].x, this.end[index].y, x, y);
      gnt1.addColorStop(0, '#fff');
      gnt1.addColorStop(1, '#ECD220');
      this.canvasMove.strokeStyle = gnt1;
      this.canvasMove.lineWidth = 1;
      this.canvasMove.stroke();
      // this.canvasMove.closePath();
      for (var i = 0; i < this.dotNumber; i++) {
        let _t = this.p - this.step * i * 2 >= 0 ? this.p - this.step * i * 2 : 1 + (this.p - this.step * i * 2);
        const coord1 = this.calcCp(
          [this.directionArr[index].x, this.directionArr[index].y],
          [this.center.x, this.center.y]
        );
        const x1 = this.calcRightNow(_t, this.center.x, coord1.x, this.directionArr[index].x);
        const y1 = this.calcRightNow(_t, this.center.y, coord1.y, this.directionArr[index].y);
        this.canvasMove.fillStyle = 'rgba(' + this.dotColor + ',' + (1 - (1 / this.dotNumber) * i) + ')';
        this.canvasMove.beginPath();
        this.canvasMove.arc(x1, y1, 1, 0, 2 * Math.PI);
        this.canvasMove.fill();
        this.canvasMove.closePath();
      }
      // 加个小飞机图标飞起来
      const xx = this.calcRightNow(this.p + this.step * 3, this.center.x, coord.x, this.directionArr[index].x);
      const yy = this.calcRightNow(this.p + this.step * 2, this.center.y, coord.y, this.directionArr[index].y);
      const img = this.createIcon(xx, yy, index);
      this.canvasMove.drawImage(img, xx - 8, yy - 8);
      this.end[index].x = x;
      this.end[index].y = y;
    },
    // 获取当前时间p时贝塞尔曲线的x, y点, 此方法不区分x y
    calcRightNow(p, start, controlPoint, end) {
      return Math.pow(1 - p, 2) * start + 2 * p * (1 - p) * controlPoint + Math.pow(p, 2) * end;
    },
    getAngle(x, y) {
      var radian = Math.atan(y / x); // 弧度
      var angle = Math.floor(180 / (Math.PI / radian)); // 弧度转角度
      if (x < 0) {
        // x小于0的时候加上180°，即实际角度
        angle = angle + 180;
      }
      return angle;
    },
    createIcon(x, y, index) {
      const deg = this.getAngle(x - this.end[index].x, y - this.end[index].y);
      const c = document.createElement('canvas');
      c.width = 16;
      c.height = 16;
      const cCtx = c.getContext('2d');
      cCtx.translate(8, 8);
      if (y < this.end[index].y && ((Math.abs(deg) > 80 && Math.abs(deg) < 91) || (deg > 240 && deg < 270))) {
        cCtx.drawImage(this.plane, -8, -8);
      } else if (x >= this.end[index].x && y < this.end[index].y) {
        cCtx.rotate(((-deg + 20) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 20) * Math.PI) / 180);
      } else if (x < this.end[index].x && y < this.end[index].y) {
        cCtx.rotate(((-deg + 160) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 160) * Math.PI) / 180);
      } else if (x < this.end[index].x && y >= this.end[index].y) {
        cCtx.rotate(((-deg + 45) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 45) * Math.PI) / 180);
      } else {
        cCtx.rotate(((225 - deg) * Math.PI) / 180);
        cCtx.drawImage(this.plane, -8, -8);
        cCtx.rotate(((deg - 225) * Math.PI) / 180);
      }
      return c;
    },
    drawMove() {
      cancelAnimationFrame(this.requestAnimationFrameName);
      // 动态线的画布
      this.canvasMove.clearRect(0, 0, 10000, 10000);
      if (this.p >= 1) {
        this.p = this.step;
        this.end = JSON.parse(JSON.stringify(this.endKeep));
      }
      // 点的画布
      this.canvasPoint.clearRect(0, 0, 10000, 10000);
      this.drawPoint(this.center.x, this.center.y);
      this.directionArr.forEach((item, index) => {
        this.drawMivie(index);
        this.drawPoint(item.x, item.y);
      });
      this.p = this.accAdd(this.p, this.step);
      this.requestAnimationFrameName = requestAnimationFrame(this.drawMove);
    },
    /*
     * num: 要被转换的数字
     * exnum: 当前中心坐标 不一定是x还是y
     */
    calcCp(start, end) {
      let middleX = 0;
      let middleY = 0;
      if (start[0] > end[0] && start[1] > end[1]) {
        middleX = ((start[0] + end[0]) / 2) * this.rate;
        middleY = ((start[1] + end[1]) / 2) * (2 - this.rate);
      }
      if (start[0] > end[0] && start[1] < end[1]) {
        middleX = ((start[0] + end[0]) / 2) * this.rate;
        middleY = ((start[1] + end[1]) / 2) * this.rate;
      }
      if (start[0] < end[0] && start[1] > end[1]) {
        middleX = ((start[0] + end[0]) / 2) * (2 - this.rate);
        middleY = ((start[1] + end[1]) / 2) * (2 - this.rate);
      }
      if (start[0] < end[0] && start[1] < end[1]) {
        middleX = ((start[0] + end[0]) / 2) * (2 - this.rate);
        middleY = ((start[1] + end[1]) / 2) * this.rate;
      }
      return {
        x: middleX,
        y: middleY
      };
    },
    accAdd(arg1, arg2) {
      let r1, r2, m;
      try {
        r1 = arg1.toString().split('.')[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split('.')[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
  }
};
</script>

<style lang="scss" scoped>
.box{
  background-color: #333;
  height: 100vh;
}
.mapBox {
  margin: 100px;
  width: 250px;
  height: 410px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .map{
    width: 200px;
    height: 360px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .canvas{
    position: absolute;
    top: 0;
    left: 0;
  }
  .airport{
    width: 16px;
    height: 16px;
    z-index: -1;
    position: absolute;
  }
}
</style>
xt_XiTu
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
使用mapbox+turf.js完成迁徙图，流向图教程
lz5211314121的博客
05-15 1390
尽管它这段弧线不是很明显，因为它的角度比较大，因此如果距离短的话，几乎就是一条直线，为了优化这一缺陷。我们可以配合另一个函数叫做：bezierSpline，这个函数是贝塞尔曲线函数，它能够将一段折线变得更加平滑，我们把greatCircle的结果放入bezierSpline中就会让这条线更有弧度。首先我们要把思路捋清楚，迁徙图表示的是从一个点出发向多个点均有流向（这个流向用线条表示）或者是从多个地方向一个地方汇总。也就是一对多或者是多对一，这里面的多和一都是城市位置，也就是经纬度坐标点。
canvas实现飞线流动效果
michael8512的博客
10-14 8402
这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画（折线），或者可以说是电流效果吧。 之前在网上有看到过流星托尾的效果，那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置，而绘制的线其实就是一个小球，一直在移动。看起来是线，代码层面上其实只画了一个点。主要的代码为 ctx.fillStyle = 'rgba(0,0,0,0.1)';//这里颜色要与背景图的颜色一样...
canvas实现平面迁徙图
baby_duoduo的博客
10-15 673
** 前言 ** 最近在做自己维护的一个可视化工具的时候，在添加基于echart的雷达图的时候，按照echart官网案例写完发现在自己项目中无法正常运行，排查了一番发现是我项目中echart的版本太低。找到问题原因之后就升级echart，但是升级echart之后发现原本正常运行的echart地图组件又无法使用，百度了一番发现echart在最新的版本中地图数据进行了切换，原先的数据由于不符合规范被砍...
地图引擎(WebGIS)之MapBox的基础使用
最新发布
qq_44930306的博客
05-17 1411
addLayer可以单独使用，也可以结合addSource一起使用；BoxGeoJSON.vue代码：geojson加载-点击事件漫游。注意：这些只是基础使用，其他的属性和方法自行查找官网，慢慢研究。跟随鼠标操作可以放大缩小、俯仰角观看，左右摇摆式观看。地球自转本质：每间隔一段时间经度累加，通过。相当于地图中的山脉形状也清晰可见了。其实就是设置不同的setFog；
使用canvas绘制基本的序号图标
weixin_44689966的博客
09-18 418
canvas
js canvas 自定义飞行轨迹 ，线性流动
丽啊丽宝的博客
08-14 940
【代码】js canvas 自定义飞行轨迹 ，线性流动。
详解使用HTML5 Canvas创建动态粒子网格动画
09-27
在本文中，我们将深入探讨如何利用Canvas创建一个动态的粒子网格动画。 首先，要在HTML页面中引入Canvas元素，这是一个二维绘图表面，可以通过JavaScript进行操作。基本的Canvas元素标签如下： ```html <canvas id...
微信小程序 使用canvas制作K线实例详解
08-31
在微信小程序中，使用canvas制作K线图是一个常见的需求，特别是在金融数据分析或股票交易应用中。K线图，又称蜡烛图，是一种显示价格变化的图表，由开盘价、收盘价、最高价和最低价组成。本文将详细介绍如何在微信小...
Canvas实现放射线动画效果
08-31
在本文中，我们将探讨如何使用HTML5的Canvas API来实现一个放射线动画效果。Canvas是HTML5的一个重要特性，它允许开发者在网页上绘制图形、动画等动态视觉元素。在这个示例中，我们将看到如何创建一个旋转的放射线...
canvas钢笔绘制线条创建导火线燃烧动画效果.zip
07-11
这个技术主要涉及到JavaScript（JS）编程，尤其是与Canvas元素交互的部分，通过Canvas的绘图方法来模拟真实世界的动态效果。 首先，让我们了解HTML5 Canvas。这是一个基于矢量图形的API，允许开发者在网页上动态...
详解Html5 Canvas画线有毛边解决方法
09-28
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5使用canvas的 bezierCurveTo()方法绘制地图轨迹曲线（三次贝塞尔曲线）
wxCSDN1997的博客
01-10 2307
参考：Canvas基于百度地图绘制流动曲线_清山博客-CSDN博客_百度地图流向图 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
html怎么绘制飞线,绘制飞线，echarts迁徙图原理
weixin_39877898的博客
06-16 387
其实是在元素上绘制了一条线，然后利用canvas 的createLinearGradient函数不断移动线段的样式位置来实现。因此首先绘制线段ctx.beginPath();ctx.moveTo(100, 0);ctx.lineTo(100, 700);由于要不断改变其样式，因此要记录起起始位置，然后利用定时器不断重置其位置来实现。var start = 0;//改变样式的函数function a...
Canvas动态加载图片、画线、画点
学习和工作总结，共勉！
11-06 7550
HTML代码： &amp;lt;canvas id=&quot;cvs&quot; width=&quot;400&quot; height=&quot;400&quot; style=&quot;margin:20px auto; display: block;&quot;&amp;gt; &amp;lt;/canvas&amp;gt; JS代码 &amp;lt;script type=&a
canvas文本绘制自动换行、字间距、竖排等实现
web前端开发
10-11 8075
作者 | 张鑫旭来源 |http://www.zhangxinxu.com/wordpress/?p=7362一、canvas对文字排版的支持很弱和CSS相比，SVG以...
html canvas 路径动画效果,html5如何在Canvas中实现自定义路径动画示例
weixin_42395498的博客
06-04 288
在最近的项目中笔者需要做一个新需求：在canvas中实现自定义的路径动画。这里所谓的自定义路径不单单包括一条直线，也许是多条直线的运动组合，甚至还包含了贝塞尔曲线，因此，这个动画也许是下面这个样子的：那么如何才能在canvas中实现这种动画效果呢？其实很简单，对于路径的处理svg非常在行，因此在canvas中实现自定义路径动画，我们需要借助svg的力量。创建Path制作动画前，先要拿到动画的路径，...
CSS第五天 （网格布局、内联框架 iframe、常用实体、画布Canvas 和 SVG、媒体）
m0_70190404的博客
07-25 388
网格布局、网格布局、内联框架 iframe、常用实体、画布Canvas 和 SVG、画布Canvas 和 SVG
Canvas2D沿路径动画实现
weixin_44022171的博客
05-19 1233
刚入职公司的时候，接手了一个canvas-2D的项目，客户要求能够实现根据实时数据的推送，canvas画布上的小车也能够根据消息在一个环路上去实时动画，尽管我们都知道这种需求是不可能实现的，如果想要实时数据推送，canvas上的图也跟着数据点位去变化，那么首先要采用WebSocket保持长连接，其次是不可能在中间动画起来的，假设小车在A，只有小车到了下一个点位B点，才能推送B点的数据给我，我是无法预知到下一个点位的，所以这种方案很明显不可取。
高德地图海量点加载自定义fonticon，canvas绘制fonticon
球球不吃虾WHR2349博客
11-03 1755
1.自定义海量点的图标，需要用到AMAPui组件库。2.0版本引入过程： AMapUI.PointSimplifier，绘制引擎的官方文章PointSimplifier.Render.Canvas 2.cion字体库 cionfont 选一个喜欢的字体库 第一步：拷贝项目下面生成的font-face @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') f
怎么使用canvas创建动态topu，topu线带有动画效果的
05-19
要创建动态的topu，并且让topu线带有动画效果，可以使用 canvas 和 JavaScript。下面是一个简单的示例代码： HTML： ```html <canvas id="myCanvas"></canvas> ``` CSS： ```css #myCanvas { width: 100%; height: 100vh; } ``` JavaScript： ```javascript const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const nodes = []; const links = []; // 创建节点 function createNode(x, y) { nodes.push({ x, y }); } // 创建链接 function createLink(source, target) { links.push({ source, target }); } // 绘制节点和链接 function draw() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制链接 for (let i = 0; i < links.length; i++) { const link = links[i]; const source = nodes[link.source]; const target = nodes[link.target]; // 计算链接的中心点 const cx = (source.x + target.x) / 2; const cy = (source.y + target.y) / 2; // 绘制链接线 ctx.beginPath(); ctx.moveTo(source.x, source.y); ctx.lineTo(target.x, target.y); ctx.strokeStyle = "#ccc"; ctx.stroke(); // 绘制链接中心点的圆形 ctx.beginPath(); ctx.arc(cx, cy, 5, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); // 绘制链接中心点的数字 ctx.fillStyle = "#000"; ctx.fillText(i + 1, cx, cy); } // 绘制节点 for (let i = 0; i < nodes.length; i++) { const node = nodes[i]; // 绘制节点圆形 ctx.beginPath(); ctx.arc(node.x, node.y, 20, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); // 绘制节点数字 ctx.fillStyle = "#000"; ctx.fillText(i + 1, node.x, node.y); } } // 添加节点和链接 createNode(100, 100); createNode(300, 100); createNode(200, 300); createLink(0, 1); createLink(1, 2); createLink(2, 0); // 每一帧更新画布 function update() { // 让节点随机移动 for (let i = 0; i < nodes.length; i++) { nodes[i].x += Math.random() * 10 - 5; nodes[i].y += Math.random() * 10 - 5; } // 更新画布 draw(); // 循环更新 requestAnimationFrame(update); } // 开始更新画布 update(); ``` 这段代码会创建一个包含三个节点和三条链接的topu，并且每一帧都会让节点随机移动，绘制出一个动态的topu。你可以根据自己的需求修改节点和链接的数量以及其他参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值