canvas流光效果

最新推荐文章于 2024-07-12 16:27:40 发布
举个栗子 .
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量161
点赞数 1
文章标签：前端 javascript html
本文链接：https://blog.csdn.net/zhuxiaolong1234/article/details/139619563
版权
<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: 25, top: 72, name: '终端零售数据' },
        { left: 43, top: 77, name: '会员消费数据' },
        { left: 64.6, top: 64, 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 = 200;//画布宽度
      let height = 300;//画布高度

      let fPoints = [{ x: 155, y: 50, r: 1.5 }];//初始点坐标

      function drawCircle() {
        for (let i = 0; i < fPoints.length; i++) {
          context.lineWidth = 0; //线条宽度-空心圆
          // context.strokeStyle = 'rgba(2, 179, 253,0.02)'; //颜色
          context.shadowBlur = 0;// 设置或返回用于阴影的颜色
          context.shadowColor = '#FADFB1';     // 设置或返回用于阴影的模糊级别
          context.fillStyle = '#FADFB1';//填充颜色-实心圆
          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 < 80 && fPoints[0].x > 100) {
          fPoints[0].x -= 1;
          fPoints[0].y += 0.6;
        } else if (fPoints[0].y > 80 && fPoints[0].y < 95) {
          fPoints[0].x += 1;
          fPoints[0].y += 0.5;
        } else if (fPoints[0].y > 95 && fPoints[0].y < 170) {
          fPoints[0].x -= 1;
          fPoints[0].y += 0.6;
        } else if (fPoints[0].y > 170) {
          fPoints = [{ x: 155, y: 50, r: 1.5 }];//初始点坐标
        }
      }

      function render() {
        //默认值为source-over
        let prev = context.globalCompositeOperation;
        //只显示canvas上原图像的重叠部分
        context.globalCompositeOperation = 'destination-in';
        //设置主canvas的绘制透明度
        context.globalAlpha = 0.9;
        //这一步目的是将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%;
      z-index: 200;
      animation: heart 2s ease-in-out infinite alternate;
    }

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

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

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

  .item {
    width: 252px;
    height: 186px;
    background-image: url('~@/assets/dataAcquisitionHome/dataAcquisitionHome_item.png');
    background-size: 100% 100%;
    position: absolute;
    z-index: 100;

    .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;

    .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: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 30%;
  z-index: 1;
}
</style>