HTML5 Canvas 梦幻的文字飞扬动画教程

之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果。今天为大家带来的是html5 canvas实现的文字漂动动画效果。画面非常梦幻。

在线预览   源码下载

实现代码如下：

html代码：

 <div class="dg ac">
        <div class="dg main a taller-than-window" style=" 245px;">
            <div style=" 6px; margin-left: -3px; height: 42px; cursor: ew-resize; position: absolute;">
            </div>
            <ul style="height: 42px;">
                <li class="cr string">
                    <div>
                        <span class="property-name">text</span><div class="c">
                            <input type="text"></div>
                    </div>
                </li>
                <li class="cr number has-slider">
                    <div>
                        <span class="property-name">speed</span><div class="c">
                            <div>
                                <input type="text"></div>
                            <div class="slider">
                                <div class="slider-fg" style=" 14.089754445385266%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="cr number has-slider">
                    <div>
                        <span class="property-name">spacing</span><div class="c">
                            <div>
                                <input type="text"></div>
                            <div class="slider">
                                <div class="slider-fg" style=" 86.70618120237087%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="cr number has-slider">
                    <div>
                        <span class="property-name">waviness</span><div class="c">
                            <div>
                                <input type="text"></div>
                            <div class="slider">
                                <div class="slider-fg" style=" 56.35901778154106%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="cr number has-slider">
                    <div>
                        <span class="property-name">trail</span><div class="c">
                            <div>
                                <input type="text"></div>
                            <div class="slider">
                                <div class="slider-fg" style=" 9.67741935483871%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="cr boolean">
                    <div>
                        <span class="property-name">multiply_trail</span><div class="c">
                            <input type="checkbox"></div>
                    </div>
                </li>
            </ul>
            <div class="close-button" style=" 245px;">
                Close Controls</div>
        </div>
    </div>

css代码：

.dg ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            clear: both;
        }
        .dg.ac
        {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 0;
            z-index: 0;
        }
        .dg:not(.ac) .main
        {
            overflow: hidden;
        }
        .dg.main
        {
            -webkit-transition: opacity 0.1s linear;
            -o-transition: opacity 0.1s linear;
            -moz-transition: opacity 0.1s linear;
            transition: opacity 0.1s linear;
        }
        .dg.main.taller-than-window
        {
            overflow-y: auto;
        }
        .dg.main.taller-than-window .close-button
        {
            opacity: 1;
            margin-top: -1px;
            border-top: 1px solid #2c2c2c;
        }
        .dg.main ul.closed .close-button
        {
            opacity: 1 !important;
        }
        .dg.main:hover .close-button, .dg.main .close-button.drag
        {
            opacity: 1;
        }
        .dg.main .close-button
        {
            -webkit-transition: opacity 0.1s linear;
            -o-transition: opacity 0.1s linear;
            -moz-transition: opacity 0.1s linear;
            transition: opacity 0.1s linear;
            border: 0;
            position: absolute;
            line-height: 19px;
            height: 20px;
            cursor: pointer;
            text-align: center;
            background-color: #000;
        }
        .dg.main .close-button:hover
        {
            background-color: #111;
        }
        .dg.a
        {
            float: right;
            margin-right: 15px;
            overflow-x: hidden;
        }
        .dg.a.has-save ul
        {
            margin-top: 27px;
        }
        .dg.a.has-save ul.closed
        {
            margin-top: 0;
        }
        .dg.a .save-row
        {
            position: fixed;
            top: 0;
            z-index: 1002;
        }
        .dg li
        {
            -webkit-transition: height 0.1s ease-out;
            -o-transition: height 0.1s ease-out;
            -moz-transition: height 0.1s ease-out;
            transition: height 0.1s ease-out;
        }
        .dg li:not(.folder)
        {
            cursor: auto;
            height: 27px;
            line-height: 27px;
            overflow: hidden;
            padding: 0 4px 0 5px;
        }
        .dg li.folder
        {
            padding: 0;
            border-left: 4px solid rgba(0,0,0,0);
        }
        .dg li.title
        {
            cursor: pointer;
            margin-left: -4px;
        }
        .dg .closed li:not(.title), .dg .closed ul li, .dg .closed ul li > *
        {
            height: 0;
            overflow: hidden;
            border: 0;
        }
        .dg .cr
        {
            clear: both;
            padding-left: 3px;
            height: 27px;
        }
        .dg .property-name
        {
            cursor: default;
            float: left;
            clear: left;
            width: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .dg .c
        {
            float: left;
            width: 60%;
        }
        .dg .c input[type=text]
        {
            border: 0;
            margin-top: 4px;
            padding: 3px;
            width: 100%;
            float: right;
        }
        .dg .has-slider input[type=text]
        {
            width: 30%;
            margin-left: 0;
        }
        .dg .slider
        {
            float: left;
            width: 66%;
            margin-left: -5px;
            margin-right: 0;
            height: 19px;
            margin-top: 4px;
        }
        .dg .slider-fg
        {
            height: 100%;
        }
        .dg .c input[type=checkbox]
        {
            margin-top: 9px;
        }
        .dg .c select
        {
            margin-top: 5px;
        }
        .dg .cr.function, .dg .cr.function .property-name, .dg .cr.function *, .dg .cr.boolean, .dg .cr.boolean *
        {
            cursor: pointer;
        }
        .dg .selector
        {
            display: none;
            position: absolute;
            margin-left: -9px;
            margin-top: 23px;
            z-index: 10;
        }
        .dg .c:hover .selector, .dg .selector.drag
        {
            display: block;
        }
        .dg li.save-row
        {
            padding: 0;
        }
        .dg li.save-row .button
        {
            display: inline-block;
            padding: 0px 6px;
        }
        .dg.dialogue
        {
            background-color: #222;
            width: 460px;
            padding: 15px;
            font-size: 13px;
            line-height: 15px;
        }
        #dg-new-constructor
        {
            padding: 10px;
            color: #222;
            font-family: Monaco, monospace;
            font-size: 10px;
            border: 0;
            resize: none;
            box-shadow: inset 1px 1px 1px #888;
            word-wrap: break-word;
            margin: 12px 0;
            display: block;
            width: 440px;
            overflow-y: scroll;
            height: 100px;
            position: relative;
        }
        #dg-local-explain
        {
            display: none;
            font-size: 11px;
            line-height: 17px;
            border-radius: 3px;
            background-color: #333;
            padding: 8px;
            margin-top: 10px;
        }
        #dg-local-explain code
        {
            font-size: 10px;
        }
        #dat-gui-save-locally
        {
            display: none;
        }
        .dg
        {
            color: #eee;
            font: 11px 'Lucida Grande' , sans-serif;
            text-shadow: 0 -1px 0 #111;
        }
        .dg.main::-webkit-scrollbar
        {
            width: 5px;
            background: #1a1a1a;
        }
        .dg.main::-webkit-scrollbar-corner
        {
            height: 0;
            display: none;
        }
        .dg.main::-webkit-scrollbar-thumb
        {
            border-radius: 5px;
            background: #676767;
        }
        .dg li:not(.folder)
        {
            background: #1a1a1a;
            border-bottom: 1px solid #2c2c2c;
        }
        .dg li.save-row
        {
            line-height: 25px;
            background: #dad5cb;
            border: 0;
        }
        .dg li.save-row select
        {
            margin-left: 5px;
            width: 108px;
        }
        .dg li.save-row .button
        {
            margin-left: 5px;
            margin-top: 1px;
            border-radius: 2px;
            font-size: 9px;
            line-height: 7px;
            padding: 4px 4px 5px 4px;
            background: #c5bdad;
            color: #fff;
            text-shadow: 0 1px 0 #b0a58f;
            box-shadow: 0 -1px 0 #b0a58f;
            cursor: pointer;
        }
        .dg li.save-row .button.gears
        {
            background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
            height: 7px;
            width: 8px;
        }
        .dg li.save-row .button:hover
        {
            background-color: #bab19e;
            box-shadow: 0 -1px 0 #b0a58f;
        }
        .dg li.folder
        {
            border-bottom: 0;
        }
        .dg li.title
        {
            padding-left: 16px;
            background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        .dg .closed li.title
        {
            background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==);
        }
        .dg .cr.boolean
        {
            border-left: 3px solid #806787;
        }
        .dg .cr.function
        {
            border-left: 3px solid #e61d5f;
        }
        .dg .cr.number
        {
            border-left: 3px solid #2fa1d6;
        }
        .dg .cr.number input[type=text]
        {
            color: #2fa1d6;
        }
        .dg .cr.string
        {
            border-left: 3px solid #1ed36f;
        }
        .dg .cr.string input[type=text]
        {
            color: #1ed36f;
        }
        .dg .cr.function:hover, .dg .cr.boolean:hover
        {
            background: #111;
        }
        .dg .c input[type=text]
        {
            background: #303030;
            outline: none;
        }
        .dg .c input[type=text]:hover
        {
            background: #3c3c3c;
        }
        .dg .c input[type=text]:focus
        {
            background: #494949;
            color: #fff;
        }
        .dg .c .slider
        {
            background: #303030;
            cursor: ew-resize;
        }
        .dg .c .slider-fg
        {
            background: #2fa1d6;
        }
        .dg .c .slider:hover
        {
            background: #3c3c3c;
        }
        .dg .c .slider:hover .slider-fg
        {
            background: #44abda;
        }
 

js代码：

 var settings = {
            text: "CANVAS TIME!",
            waviness: 3,
            spacing: 5,
            speed: 16,
            trail: 4,
            multiply_trail: false
        };
 
        var viewWidth = 1024;
        var viewHeight = 512;
        var drawingCanvas, ctx;
        var timeStep = (1 / 16);
        var time = 0;
        var frame = 0;
 
        var measureDiv = document.getElementById('text-measure');
        var totalTextWidth = 0;
        var letters = [];
 
        var bgColor1 = '#FFF0A5',
    bgColor2 = '#FFB03B',
    letterFillColor1 = '#B64926',
    letterFillColor2 = '#8E2800',
    letterStrokeColor = '#DE0017';
 
        var textFillPattern = createPattern(bgColor1, bgColor2);
        var backgroundFillPattern = createPattern(letterFillColor1, letterFillColor2);
 
        var Letter = function (v) {
            measureDiv.innerHTML = v;
 
            this.width = measureDiv.clientWidth;
            this.height = measureDiv.clientHeight;
            this.value = v;
            this.x = 0;
            this.y = 0;
 
            var history = [];
 
            this.draw = function () {
                if (settings.multiply_trail) {
                    ctx.globalCompositeOperation = 'multiply';
                }
 
                for (var i = 0; i < history.length; i++) {
                    ctx.strokeText(this.value, history[i].x, history[i].y);
                }
 
                ctx.strokeText(this.value, this.x, this.y);
                ctx.globalCompositeOperation = 'source-over'; // this is the default
                ctx.fillText(this.value, this.x, this.y);
 
                history.unshift({ x: this.x, y: this.y });
                if (history.length > settings.trail) history.length = settings.trail;
            }
        }
 
        initGui();
        initDrawingCanvas();
        processText();
 
        requestAnimationFrame(loop);
 
        function initGui() {
            var gui = new dat.GUI();
 
            gui.add(settings, 'text').onChange(processText);
            gui.add(settings, 'speed', 1, 60).onChange(function () { timeStep = 1 / (61 - settings.speed) });
            gui.add(settings, 'spacing', 0, 10);
            gui.add(settings, 'waviness', 1, 16);
            gui.add(settings, 'trail', 1, 32).step(1);
            gui.add(settings, 'multiply_trail');
        }
 
        function initDrawingCanvas() {
            drawingCanvas = document.getElementById("drawing_canvas");
            drawingCanvas.width = viewWidth;
            drawingCanvas.height = viewHeight;
            ctx = drawingCanvas.getContext('2d');
 
            ctx.font = 'bolder 120px Arial';
            ctx.lineJoin = 'round';
        }
 
        function processText() {
            letters.length = 0;
            totalTextWidth = 0;
 
            for (var i = 0; i < settings.text.length; i++) {
                letters.push(new Letter(settings.text[i]));
                totalTextWidth += letters[i].width;
            }
        }
 
        function createPattern(c1, c2) {
            var patternCanvas = document.getElementById('pattern_canvas');
            var w = patternCanvas.width = 256;
            var h = patternCanvas.height = 256;
            var hw = w * 0.5;
            var hh = h * 0.5;
            var c = patternCanvas.getContext('2d');
            // background color
            c.fillStyle = c1;
            c.fillRect(0, 0, w, h);
            // the 'v' shape
            c.fillStyle = c2;
            c.beginPath();
            c.moveTo(0, 0);
            c.lineTo(hw, hh);
            c.lineTo(w, 0);
            c.lineTo(w, hh);
            c.lineTo(hw, h);
            c.lineTo(0, hh);
            c.closePath();
            c.fill();
 
            return c.createPattern(patternCanvas, 'repeat');
        }
 
        function loop() {
            draw();
 
            time += timeStep;
            frame++;
 
            requestAnimationFrame(loop);
        }
 
        function draw() {
            ctx.fillStyle = backgroundFillPattern;
            ctx.fillRect(0, 0, viewWidth, viewHeight);
 
            if (letters.length === 0) return;
 
            ctx.strokeStyle = letterStrokeColor;
            ctx.lineWidth = 16;
            ctx.fillStyle = textFillPattern;
 
            var letter,
        margin = settings.spacing,
        x = (viewWidth - (totalTextWidth + margin * (settings.text.length - 1))) * 0.5,
        y = viewHeight * 0.5 + letters[0].height * 0.25,
        d = settings.waviness / letters.length;
 
            for (var i = 0; i < letters.length; i++) {
                letter = letters[i];
                letter.x = x + Math.cos(time + i * d) * 64;
                letter.y = y + Math.sin(time + i * d) * 184;
                letter.draw();
 
                x += letter.width + margin;
            }
        } //@ sourceURL=pen.js

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/5285