操作方法
新建html文档。
书写hmtl代码。 <div class="b_10_3"> <canvas width="300" height="300" id="myCanvas"></canvas> <div id="tags" style="display: none;"> <a href="#">爱</a> <a href="#">承诺</a><a href="#">轻时尚</a><a href="#">简约</a><a href="#">科技</a> <a href="#">美丽</a><a href="#">智慧</a><a href="#">情感</a><a href="#">体验</a><a href="#">互联网</a> </div>
书写css代码。 <style> .b_10_3 { overflow: hidden; text-align: center; background:#09C; } .b_10_3 span { float: left; font-size: 16px; line-height: 2em; color:#fff;} .b_10_3 span.bold { font-weight: bold; } .b_10_3 span:nth-child(1) { width: 35%; text-align: center; } .b_10_3 span:nth-child(2) { width: 30%; text-align: left; } .b_10_3 span:nth-child(3) { width: 35%; text-align: left; } .b_10_3 span:nth-child(4) { width: 35%; text-align: right; } .b_10_3 span:nth-child(5) { width: 25%; text-align: right; } .b_10_3 span:nth-child(6) { width: 25%; text-align: right; } .b_10_3 span:nth-child(7) { width: 50%; text-align: center; } .b_10_3 span:nth-child(8) { width: 30%; text-align: center; } .b_10_3 span:nth-child(9) { width: 50%; text-align: right; } .b_10_3 span:nth-child(10) { width: 40%; text-align: right; } </style>
书写并添加js代码。 <script src="./demo/jquery-1.11.3.min.js"></script> <script src="./demo/tagcanvas.min.js"></script> <script> window.onload = function () { try { var i, et = document.getElementById('tags').childNodes; for (i in et) { et[i].nodeName == 'A' && et[i].addEventListener('click', function (e) { e.preventDefault(); }); } TagCanvas.Start('myCanvas', 'tags', { textColour: '#fff', outlineColour: '#fff', reverse: true, depth: 0.8, dragControl: true, decel:0.95, maxSpeed: 0.05, initial: [-0.2, 0] }); } catch (e) { } }; </script>
代码整体结构。
查看效果。