本文最后更新于 413 天前，其中的信息可能已经有所发展或是发生改变。
粒子组成文字特效，效果不错。
下面输入框可以输入预览文字。
[c-downbtn type=”default” url=”https://huawei-obs-718.obs.cn-east-3.myhuaweicloud.com/img/HTML5-Canvas-01.zip” pwd=””]资源文件下载[/c-downbtn]
部分代码展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas粒子特效文字动画 DEMO演示</title> <link rel="stylesheet" href="static/css/normalize.css"> <link rel="stylesheet" href="static/css/style.css" media="screen" type="text/css" /> </head> <body> <div style="text-align:center;clear:both;position:absolute;top:0;left:260px"><script src="static/js/follow.js" type="text/javascript"></script> </div> <canvas class="canvas"></canvas> <div class="help">?</div> <div class="ui"> <input class="ui-input" type="text" /> <span class="ui-return">↵</span> </div> <div class="overlay"> <div class="tabs"> <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div> <div class="tabs-panels"> <ul class="tabs-panel commands"> <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span> |<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li> </ul> <div class="tabs-panel ui-details"> <div class="ui-details-content"> <h1>Shape Shifter</h1> <p> An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a/>.<br/> <a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons. </p> <br/><p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank">Shape Shifter</a> to use icons.</p> </div> </div> <div class="tabs-panel ui-share"> <div class="ui-share-content"> <h1>Sharing</h1> <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p> <p> <a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/> <a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a> </p> </div> </div> </div> </div> </div> <script src="static/js/index.js"></script> </body> </html>
