SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({
    el: '#app',
    template:
        ` <div class="b_10_3">
           <canvas width="200" height="170" id="myCanvas"></canvas>
           <div id="tags" style="display:none">
               <a href="#" v-for="(value,index) in textInfo" :key="index">{{value.textKey}}</a>
           </div>
       </div>`,
    data() {
        return {
            textInfo:
                [{
                    "textKey": "金融在线"
                },
                {
                    "textKey": "保险欺诈"
                },
                {
                    "textKey": "现金价值"
                },
                {
                    "textKey": "互联网产品"
                },
                {
                    "textKey": "线上资料库"
                },
                {
                    "textKey": "保单贷款"
                },
                {
                    "textKey": "风险意识"
                },
                {
                    "textKey": "保额确定"
                },
                {
                    "textKey": "E行销"
                },
                {
                    "textKey": "分红险"
                },
                {
                    "textKey": "保险红包"
                },
                {
                    "textKey": "签单法宝"
                },
                {
                    "textKey": "非法集资"
                },
                {
                    "textKey": "如何轻互动"
                },
                {
                    "textKey": "画图说保险"
                }
                ],
        }
    },
    created() {
        this.getTextData()
    },
    mounted() {
        this.setTextAttribute();
    },
    methods: {
        getTextData: function () {
            this.textInfo = TextData;
        },
        setTextAttribute: function () {
            try {
                TagCanvas.Start('myCanvas', 'tags', {
                    interval: 20,
                    textColour: '#97d4ff',
                    outlineColour: '#fff',
                    shape: 'sphere',
                    textHeight: 14,
                    reverse: true,
                    noMouse:true,
                    depth: 0.5,
                    dragControl: false,
                    //                    decel:0.95,
                    maxSpeed: 0.05,
                    minSpeed: 0.05,
                    initial: [-0.08, 0]
                });
            } catch (e) {
                console.log(e)
            }
        }
    }
})
<div id="app"></div>
  #myCanvas{
        margin-top: 49px;
    }
    .b_10_3 {
        text-align:center;
        width:220px;
        height:268px;
    }
    .b_10_3 span {
        font-size:12px;
    }
    .b_10_3 span.bold {
        font-weight:bold;
    }
    .b_10_3 span:nth-child(1) {
        width: 15%;
        text-align: center;
    }
    .b_10_3 span:nth-child(2) {
        width: 10%;
        text-align: left;
    }

本项目引用的自定义外部资源