vue2 实现 tagcanvas 抽奖名单 “球体旋转动画” 的组件封装和调用

一、示例图：

tagcanvas官网：https://www.goat1000.com/tagcanvas.php#links

抽奖系统实例：GitHub - vitozyf/lucky-draw: 年会抽奖程序

二、下载 tagcanvas.min.js文件 ，放到assets/lib下

在全局 main.js 中引入

import Vue from 'vue';
import App from './App.vue';
import '@/assets/lib/tagcanvas.min.js';

new Vue({
  render: h => h(App)
}).$mount('#app');

三、组件 tagNames.vue

<template>
    <div id="app">
      <canvas width="500" height="500" id="myCanvas">
        <ul id="tags">
          <li v-for="name in names" :key="name">
            <a href="#">{{ name }}</a>
          </li>
        </ul>
      </canvas>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        names: [
          'Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace', 'Heidi',
          'Ivan', 'Judy', 'Kathy', 'Louis', 'Mallory', 'Niaj', 'Olivia',
          'Peggy', 'Quentin', 'Rupert', 'Sybil', 'Trent', 'Uma', 'Victor',
          'Walter', 'Xena', 'Yanni', 'Zara', 'Alex', 'Bella', 'Chris'
          // Add more names as needed
        ]
      };
    },
    mounted() {
      this.initializeTagCanvas();
    },
    methods: {
      initializeTagCanvas() {
        try {
          TagCanvas.Start('myCanvas', 'tags', {
            textColour: '#000000',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05,
            weight: true,
            imageMode: 'text',
            textFont: 'Impact,"Arial Black",sans-serif',
            textHeight: 15,
            weightMode: 'size',
            weightSizeMin: 12,
            weightSizeMax: 24,
            initial: [0.1, -0.1],
            decel: 0.98
          });
        } catch (e) {
          document.getElementById('myCanvas').style.display = 'none';
        }
      }
    }
  };
  </script>

  <style>
  #app {
    text-align: center;
    margin-top: 20px;
  }
  #tags {
    display: none;
  }
  </style>

四、页面调用

<template>
  <div>
    <TagNames></TagNames>
  </div>
</template>

<script>
import TagNames from '@/components/tagNames';
export default {
  components: { TagNames },
}

</script>

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~