HTML5 Canvas Tag Cloud
TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud. I'm releasing it as open source under the LGPL v3 license. Below is an example.
TagCanvas 는 자바스크립트 클래스로 구현되어 있으며, 이는 html 5 canvas 로 메니메이션과 그림을 제공해 줍니다. 예제는 tag cloud 제품처럼 구현한 부분입니다. 오픈 소스이고, LGPL v3 입니다.
아래소스는 http://techdayskorea.azurewebsites.net/Conference/AllTags 여기서 이를 사용하고 있네요.
데모는 거기서...
<script src="/Scripts/jquery.tagcanvas.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if (!$('#myCanvas').tagcanvas({
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05
}, 'tags')) {
// something went wrong, hide the canvas container
$('#myCanvasContainer').hide();
}
});
</script>
<h2>태그 구름</h2>
<div id="myCanvasContainer">
<canvas width="300" height="300" id="myCanvas">
현재 브라우저는 HTML5를 지원하지 않습니다.
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="/Conference/SessionsByTag?tag=.NET">.NET</a></li>
<li><a href="/Conference/SessionsByTag?tag=ALM">ALM</a></li>
<li><a href="/Conference/SessionsByTag?tag=AngularJS">AngularJS</a></li>
<li><a href="/Conference/SessionsByTag?tag=ASP.NET%20MVC%205">ASP.NET MVC 5</a></li>
<li><a href="/Conference/SessionsByTag?tag=Azure">Azure</a></li>
<li><a href="/Conference/SessionsByTag?tag=Bootstrap">Bootstrap</a></li>
<li><a href="/Conference/SessionsByTag?tag=CSS3">CSS3</a></li>
<li><a href="/Conference/SessionsByTag?tag=Dapper%20dot%20net">Dapper dot net</a></li>
<li><a href="/Conference/SessionsByTag?tag=Device">Device</a></li>
<li><a href="/Conference/SessionsByTag?tag=EF%20Code%20First">EF Code First</a></li>
<li><a href="/Conference/SessionsByTag?tag=Entity%20Framework">Entity Framework</a></li>
<li><a href="/Conference/SessionsByTag?tag=HTML5">HTML5</a></li>
<li><a href="/Conference/SessionsByTag?tag=Java">Java</a></li>
<li><a href="/Conference/SessionsByTag?tag=jQuery%20Mobile">jQuery Mobile</a></li>
<li><a href="/Conference/SessionsByTag?tag=NuGet">NuGet</a></li>
<li><a href="/Conference/SessionsByTag?tag=Service">Service</a></li>
<li><a href="/Conference/SessionsByTag?tag=Tool">Tool</a></li>
<li><a href="/Conference/SessionsByTag?tag=Unity">Unity</a></li>
<li><a href="/Conference/SessionsByTag?tag=Visual%20Studio">Visual Studio</a></li>
<li><a href="/Conference/SessionsByTag?tag=VSO">VSO</a></li>
<li><a href="/Conference/SessionsByTag?tag=Windows%20Azure">Windows Azure</a></li>
<li><a href="/Conference/SessionsByTag?tag=Windows%20Phone">Windows Phone</a></li>
<li><a href="/Conference/SessionsByTag?tag=Xamarin">Xamarin</a></li>
<li><a href="/Conference/SessionsByTag?tag=%ED%95%9C%EA%B5%AD%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8">한국마이크로소프트</a></li>
</ul>
</div>