tagcanvas 使用方法
1.引入tagcanvas.min.js文件官方地址:tagcanvas官方文档<script src="js/tagcanvas.min.js"></script>2.创建HTML结构 (结合vue.js使用的,看个人喜好)<div id="myCanvasContainer"><canvas width="800" height="600" id="m
·
1.引入tagcanvas.min.js文件 官方地址:tagcanvas官方文档
<script src="js/tagcanvas.min.js"></script>
2.创建HTML结构 (结合vue.js使用的,看个人喜好)
<div id="myCanvasContainer">
<canvas width="800" height="600" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tags" style="display: none;">
<ul>
<li v-for="item in tagArr"><a href="javascript:;" v-cloak>{{item.name}}</a></li>
</ul>
</div>
3.方法初始化
try {
TagCanvas.Start('myCanvas', 'tags', {
textColour: '#fff',
dragControl: 1,
decel: 0.95,
textHeight: 16,
minSpeed: 0.01,
initial: [0.1,0.1],
});
} catch (e) {
document.getElementById('myCanvasContainer').style.display = 'none';
}
4.开始旋转
TagCanvas.SetSpeed('myCanvas', [3,3]);
5.停止旋转
TagCanvas.SetSpeed('myCanvas', [0.1,0.1]);
其中还可以设置标签的形状比如球型,水平环,还可以自定义形状
更多推荐
已为社区贡献8条内容
所有评论(0)