canvas 流线效果 + 浮动

举个栗子 .
已于 2024-06-13 17:46:16 修改
阅读量287
点赞数 4
文章标签：前端 javascript html canva可画 css
于 2024-06-13 17:43:26 首次发布
本文链接：https://blog.csdn.net/zhuxiaolong1234/article/details/139660607
版权
<template>
  <div class="container">
    <div class="center-box">
      <img src="@/assets/dataAcquisitionHome/icon_dataAcquisitionHome_centerTop.png" class="img1">
      <img src="@/assets/dataAcquisitionHome/icon_dataAcquisitionHome_centerBottom.png" class="img2">
    </div>
    <div class="item" v-for="(item, index) of itemPosition" :key="index"
      :style="[{ 'top': item.top + '%', 'left': item.left + '%' }]">
      <div class="item-title2" v-if="index == 0 || index == 4">{{ item.name }}</div>
      <div class="item-title" v-else>{{ item.name }}</div>
      <div class="item-text">
        <div class="text textType">正常/异常</div>
      </div>
      <div class="item-text2">
        <div class="text textNumber">3/0</div>
      </div>
    </div>

    <div class="display-board">
      <div class="board-title">Master</div>

      <div class="board-item">
        <div class="item-name">数据总量</div>
        <div class="item-numb">
          <div class="numb-left board-title">235</div>
          <div class="numb-right">ms</div>
        </div>
      </div>
      <div class="board-item">
        <div class="item-name">API接口调用次数</div>
        <div class="item-numb">
          <div class="numb-left board-title">1332</div>
          <div class="numb-right">ms</div>
        </div>
      </div>
      <div class="board-item">
        <div class="item-name">对接系统总数</div>
        <div class="item-numb">
          <div class="numb-left board-title">235</div>
          <div class="numb-right"></div>
        </div>
      </div>
    </div>

    <canvas id="canvas" class="canvas1"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemPosition: [
        { left: 25, top: 26, name: '客户基础数据' },
        { left: 17, top: 49, name: '商业批发数据' },
        { left: 26, top: 72, name: '终端零售数据' },
        { left: 43, top: 77, name: '会员消费数据' },
        { left: 64.6, top: 64, name: '专卖内管数据' },
        { left: 68.5, top: 37.5, name: '仓储物流数据' },
        { left: 54, top: 14, name: '社会经济数据' },
      ]
    }
  },
  mounted() {
    this.doDraw()
  },
  methods: {
    doDraw() {
      let c = document.getElementById("canvas");
      let context = c.getContext("2d");
      let width = 700;//画布宽度
      let height = 300;//画布高度
      let fPoints = [{ x: 115, y: 85, r: 1 }, { x: 105, y: 85, r: 1 }, { x: 100, y: 55, r: 1 }, { x: 175, y: 90, r: 1 }, { x: 180, y: 45, r: 1 }, { x: 195, y: 52, r: 1 }, { x: 195, y: 80, r: 1 }];//初始点坐标

      function drawCircle() {
        for (let i = 0; i < fPoints.length; i++) {
          context.lineWidth = 0; //线条宽度-空心圆
          context.strokeStyle = 'rgba(0,0,0,1)'; //颜色
          context.shadowBlur = 1;// 设置或返回用于阴影的颜色
          context.shadowColor = '#D3B58B';     // 设置或返回用于阴影的模糊级别
          context.fillStyle = '#FBE9CA';//填充颜色-实心圆
          context.fill();//画实心圆
          context.beginPath();
          context.arc(fPoints[i].x, fPoints[i].y, fPoints[i].r, 0, Math.PI * 2);
          context.closePath();
        }

        if (fPoints[0].y < 100) {
          fPoints[0].x -= 1;
          fPoints[0].y += 0.5;
        } else if (fPoints[0].y > 90 && fPoints[0].y < 107) {
          fPoints[0].x += 0.5;
          fPoints[0].y += 0.2;
        } else if (fPoints[0].y > 105 && fPoints[0].y < 125) {
          fPoints[0].x -= 1;
          fPoints[0].y += 0.5;
        } else if (fPoints[0].y > 125) {
          fPoints = [{ x: 115, y: 85, r: 1 }, { x: 105, y: 85, r: 1 }, { x: 100, y: 55, r: 1 }, { x: 175, y: 90, r: 1 }, { x: 180, y: 45, r: 1 }, { x: 195, y: 52, r: 1 }, { x: 195, y: 80, r: 1 }];//初始点坐标
        }

        if (fPoints[1].y < 105 && fPoints[1].x > 50) {
          fPoints[1].x -= 1;
          fPoints[1].y += 0.5;
        } else if (fPoints[1].x < 70) {
          fPoints[1].x -= 1;
          fPoints[1].y -= 0.5;
        }

        if (fPoints[2].y < 60 && fPoints[2].y > 30) {
          fPoints[2].x -= 1;
          fPoints[2].y -= 0.5;
        }

        if (fPoints[3].y < 103) {
          fPoints[3].x += 1;
          fPoints[3].y += 0.5;
        } else if (fPoints[3].y > 100 && fPoints[3].y < 130) {
          fPoints[3].x -= 1;
          fPoints[3].y += 0.5;
        }

        if (fPoints[4].y < 103 && fPoints[4].y > 35) {
          fPoints[4].x += 1;
          fPoints[4].y -= 0.45;
        } else if (fPoints[4].y < 35 && fPoints[4].y > 24) {
          fPoints[4].x -= 1;
          fPoints[4].y -= 0.45;
        } else if (fPoints[4].y > 15) {
          fPoints[4].x += 1;
          fPoints[4].y -= 0.45;
        }
        if (fPoints[5].y < 103 && fPoints[5].y > 30 && fPoints[5].x < 250) {
          fPoints[5].x += 1;
          fPoints[5].y -= 0.45;
        } else if (fPoints[5].x > 230) {
          fPoints[5].x += 0.8;
          fPoints[5].y += 0.4;
        }
        if (fPoints[6].y > 75 && fPoints[6].y < 110) {
          fPoints[6].x += 1;
          fPoints[6].y += 0.45;
        }
      }

      function render() {
        //默认值为source-over
        let prev = context.globalCompositeOperation;
        //只显示canvas上原图像的重叠部分
        context.globalCompositeOperation = 'destination-in';
        //设置主canvas的绘制透明度
        context.globalAlpha = 0.93;
        //这一步目的是将canvas上的图像变的透明
        context.fillRect(0, 0, width, height);
        //在原图像上重叠新图像
        context.globalCompositeOperation = prev;
        //在主canvas上画新圆
        drawCircle();
        if (width !== 0) {
          //在动画没有结束前，递归渲染
          window.requestAnimationFrame(render);
        }
      }
      window.requestAnimationFrame(render);
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #000;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-image: url('~@/assets/dataAcquisitionHome/icon_dataAcquisitionHome_bg.png');
  background-size: 100% 100%;
  position: relative;

  .center-box {
    width: 530px;
    height: 339px;
    position: absolute;
    left: calc(50% - 265px);
    top: calc(50% - 170px);

    .img1 {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 31%;
      top: -23%;
      animation: heart 2s ease-in-out infinite alternate;
      z-index: 80;
    }

    @keyframes heart {
      from {
        transform: translate(0, 0)
      }

      to {
        transform: translate(0, 30px)
      }
    }

    .img2 {
      width: 530px;
      height: 339px;
      position: absolute;
      top: 10%;
    }
  }

  $itemCount : 9;

  @for $i from 1 to $itemCount {
    .item:nth-child(#{$i}) {
      width: 252px;
      height: 186px;
      background-image: url('~@/assets/dataAcquisitionHome/dataAcquisitionHome_item.png');
      background-size: 100% 100%;
      position: absolute;
      z-index: 100;
      animation: heart $i * 1s ease-in-out infinite alternate;

      @keyframes heart {
        from {
          transform: translate(0, 0)
        }

        to {
          transform: translate(0, 10px)
        }
      }

      .item-title,
      .item-title2 {
        transform: rotate3d(2, 4, 1, 60deg);
        position: absolute;
        left: 48%;
        top: 2%;
        width: 160px;
        font-size: 26px;
        background: linear-gradient(to right, #6FF6FE, #6FF6FE);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0px 0px 4px #6FF6FE, 0px 0px 2px #fff;
      }

      .item-title2 {
        transform: rotate3d(0.7, -3, -0.7, 63deg);
        left: -14%;
        top: -1%;
        background: linear-gradient(to right, #F7DAB1, #BFA07D);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0px 0px 4px #F7DAB1, 0px 0px 2px #BFA07D;
      }

      .item-text,
      .item-text2 {
        transform: rotate3d(1, 0, 0.11, 43deg);
        position: absolute;
        left: 39%;
        top: 30%;

        .text {
          color: #fff;
          -moz-transform: rotate(36deg);
          -webkit-transform: rotate(36deg);
          display: block;
          position: absolute;
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
          text-transform: uppercase;
          font-size: 18px;
          font-weight: bold;
          width: 120px;
          line-height: 40px;
        }

        .textNumber {
          background: linear-gradient(to right, #6FF6FE, #fff);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          font-size: 28px;
        }
      }

      .item-text2 {
        left: 34%;
        top: 45%;
      }
    }
  }


  .display-board {
    height: 19rem;
    width: 220px;
    background-image: url('~@/assets/dataAcquisitionHome/icpn_dataAcquisitionHome_board_bg.png');
    background-size: 100% 100%;
    position: absolute;
    top: 39%;
    left: 59.5%;
    transform: rotate3d(0.6, 0.7, -0.2, -57deg);
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    z-index: 80;

    .board-title {
      font-size: 32px;
      font-weight: bold;
      text-shadow: 0px 0px 5px #F6F9FC, 0px 0px 20px #3176C3;
    }

    .board-item {
      margin-top: 20px;

      .item-name {
        color: #AABECB;
        font-size: 18px;
        font-weight: bold;
      }

      .item-numb {
        display: flex;
        align-items: center;
        margin-top: 10px;

        .numb-left {
          font-size: 16px;
        }

        .numb-right {
          font-size: 14px;
          color: #AABECB;
          font-weight: bold;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.canvas1 {
  width: 1000px;
  height: 700px;
  position: absolute;
  top: 20%;
  left: 24%;
  z-index: 99;
}
</style>