tagcanvas 使用方法

Posted 2021-06-06 不靠谱的作曲家

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]);

其中还可以设置标签的形状比如球型，水平环，还可以自定义形状