基于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