昔有朝歌夜弦之高樓厨埋，上有傾城傾國(guó)之舞袖责掏。
我的github: 李大玄
我的私人博客: 李大玄
我的npm開(kāi)源庫(kù): 李大玄
我的簡(jiǎn)書(shū): 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
嗶哩嗶哩: 李大玄
在這里插入圖片描述
首先咱們需要一個(gè)插件這個(gè)插件是jQuery的插件
官方文檔英文的[Facepalm]
css 就不忘初心貼了 太多了 懶得找
代碼是這樣的 HTML
div class="cy data-flow">
<div class="data-flow-content" data-title="客流標(biāo)簽詞云">
<!-- 客流標(biāo)簽詞云 -->
<div id="canvas-ifrshb" class="Rotation">
<canvas id="canvas-yrieay">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div style="display: none" class="data-flow-label" id="tags">
<ul></ul>
</div>
</div>
</div>
JS
const update = function () {
if (!$('#canvas-yrieay').tagcanvas({
textFont: 'Impact,"Arial Black",sans-serif',
textColour: '#fff',
outlineColour: '#0743EC',
reverse: true,
textHeight: 16,
shape: "sphere",
depth: 0.8,
decel: 0.99,
padding: 0,
wheelZoom: true,
dragControl: false,
fadeIn: 0,
freezeActive: false,
outlineMethod: "outline",
outlineOffset: "5",
outlineRadius: "0",
outlineThickness: "2",
maxSpeed: 0.05,
initial: [0.1, -0.2], // 配置旋轉(zhuǎn)速度
}, 'tags')) {
$('#canvas-yrieay').hide();
}
};
const getHtml = function (result: Array) {
$('#canvas-yrieay').attr('width', $('#canvas-ifrshb').width());
$('#canvas-yrieay').attr('height', $('#canvas-ifrshb').height() - 10);
const $label = $('.data-flow-label ul', '#app');
const html = getLabels(result);
$label.html('');
$label.prepend(html);
update();
};
