基于HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

在线预览   源码下载

实现的代码。

html代码：

 <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>&nbsp;|<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>

via：http://www.w2bc.com/Article/31144