TagCanvas JS
TagCanvas jQuery plugin example
TagCanvas is a Javascript class that will draw and animate an HTML5 canvas based tag cloud. I will describe all the steps that are required to get a TagCanvas jQuery plugin example, using either the stand-alone or jQuery plugin version. In this example how to use TagCanvas JS using jQuery. If you are too impatient to read all of this, you can skip to Github page for full working source code.
TagCanvas jQuery plugin Installation Instructions
1. Include the TagCanvas jQuery plugin files into your page:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://www.goat1000.com/jquery.tagcanvas.min.js"></script>
2. Add a TagCanvas jQuery plugin to your page, with the required width and height:
<canvas width="500" height="500" id="myCanvas">
<ul>
<li><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML 5</a></li>
<li><a data-weight="25" href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">CSS 3</a></li>
<li><a data-weight="15" href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)" target="_blank">SASS</a></li>
<li><a data-weight="15" href="https://en.wikipedia.org/wiki/Less_(stylesheet_language)" target="_blank">Less</a></li>
<li><a data-weight="25" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a></li>
<li><a data-weight="19" href="https://en.wikipedia.org/wiki/JQuery" target="_blank">jQuery</a></li>
<li><a data-weight="19" href="https://en.wikipedia.org/wiki/JQueryUI" target="_blank">jQuery UI</a></li>
<li><a data-weight="23" href="https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)" target="_blank">Bootstrap</a></li>
<li><a data-weight="25" href="https://en.wikipedia.org/wiki/PHP" target="_blank">PHP</a></li>
<li><a data-weight="19" href="https://en.wikipedia.org/wiki/MySQL" target="_blank">mySQl</a></li>
<li><a data-weight="19" href="https://en.wikipedia.org/wiki/MySQL" target="_blank">DMS</a></li>
<li><a data-weight="26" href="https://en.wikipedia.org/wiki/WordPress" target="_blank">Wordpress</a></li>
<li><a data-weight="17" href="https://en.wikipedia.org/wiki/Git" target="_blank">Git</a></li>
<li><a data-weight="17" href="https://en.wikipedia.org/wiki/WooCommerce" target="_blank">WooCommerce</a></li>
<li><a data-weight="17" href="https://en.wikipedia.org/wiki/GitHub" target="_blank">Git Hub</a></li>
<li><a data-weight="17" href="https://en.wikipedia.org/wiki/User_interface_design" target="_blank">UI Design</a></li>
<li><a data-weight="17" href="https://en.wikipedia.org/wiki/User_experience_design" target="_blank">UX Design</a></li>
<li><a data-weight="13" href="https://en.wikipedia.org/wiki/XML" target="_blank">XML</a></li>
<li><a data-weight="13" href="https://en.wikipedia.org/wiki/Mailchimp" target="_blank">Mailchimp</a></li>
<li><a data-weight="24" href="https://en.wikipedia.org/wiki/Adobe_XD" target="_blank">Adobe XD</a></li>
<li><a data-weight="24" href="https://en.wikipedia.org/wiki/Adobe_Photoshop" target="_blank">Adobe Photoshop</a></li>
<li><a data-weight="21" href="https://en.wikipedia.org/wiki/Node.js" target="_blank">Node JS</a></li>
<li><a data-weight="19" href="https://www.npmjs.com/" target="_blank">npm</a></li>
</ul>
</canvas>3. Initialise the TagCanvas jQuery plugin class with the id of the canvas element:
$(document).ready(function(){
$('#myCanvas').tagcanvas({
textColour : '#000000',
outlineThickness : 0.5,
outlineColour : '#fe0853',
maxSpeed : 0.06,
freezeActive:true,
shuffleTags:true,
shape:'sphere',
zoom:0.9,
noSelect:true,
textFont:null,
pinchZoom:true,
freezeDecel:true,
fadeIn:3000,
initial: [0.3,-0.1],
depth : 0.8
});
})
Internet Explorer 9 does support the canvas element, so excanvas.js is not required. The conditional comment required to include excanvas.js for earlier versions should look like this:
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script src="tagcanvas.min.js" type="text/javascript"></script>
Starting the cloud TagCanvas JS
In this paragraph, I’m going to discuss a few reasons. Firstly, start functions start or restart the cloud animation. Secondly, The canvas ID must be provided for the stand-alone version, though the tag list ID and options arguments are optional.
When the tag list ID is not provided so TagCanvas will use any links it finds inside the canvas element for the tags – though this will not work in IE versions before IE9.
Using drag control
To enable drag controls, set the dragControl option to true. The dragThreshold the option can be adjusted to determine how many pixels the cursor must move before a click is judged to be a drag – by default it is set to 4 pixels.
Some of the other options work slightly differently when drag controls are enabled:
maxSpeedcontrols dragging sensitivitydecelcontrols deceleration when the cursor leaves the canvas and when the cloud is released from being draggedreverseis ignoredfreezeActiveis ignored
The noMouse and lock = "xy" options both work normally but leaving the cloud immobile, and noSelect allows dragging but without the ability to click on a tag.
If have any problem with Installation This TagCanvas jQuery plugin example Just ping me a message.