一.簡介

在大量游戲制作過程當中，必不可少的一個重要元素就是Loading.在大量的flash游戲當中我們經常可以看到，比如《XXX》的Loading

一個好的Loading,可以給用戶不錯的第一感覺，可以吸引更多的玩家。在Canvas中，我們也可以制作一個動態的loading.

這一篇，我們先看看效果，在后續的文章當中，我們一步一步把它提取成插件可配置的形式，方便大量的游戲復用。

二.預覽版制作

        Word = function (text, fontSize, color, position) {
            this.text = text;
            this.fontSize = fontSize;
            this.color = color;
            this.position = position;
        }
        Vector2 = function (x, y) {
            this.x = x || 0;
            this.y = y || 0;
        };
        var textL = new Word("L", 30, "#ffffff", new Vector2(40, 60));
        var textO = new Word("o", 30, "#ffffff", new Vector2(60, 60));
        var textA = new Word("a", 30, "#ffffff", new Vector2(80, 60));
        var textD = new Word("d", 30, "#ffffff", new Vector2(100, 60));
        var textI = new Word("i", 30, "#ffffff", new Vector2(120, 60));
        var textN = new Word("n", 30, "#ffffff", new Vector2(140, 60));
        var textG = new Word("g", 30, "#ffffff", new Vector2(160, 60));
        var textPoint1 = new Word(".", 30, "#ffffff", new Vector2(180, 60));
        var textPoint2 = new Word(".", 30, "#ffffff", new Vector2(200, 60));
        var textPoint3 = new Word(".", 30, "#ffffff", new Vector2(220, 60));
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#ffffff";
        var text = [];
        text.push(textL);
        text.push(textO);
        text.push(textA);
        text.push(textD);
        text.push(textI);
        text.push(textN);
        text.push(textG);
        text.push(textPoint1);
        text.push(textPoint2);
        text.push(textPoint3);

        function drawAllWords() {
            cxt.font = "bolder " + textL.fontSize + "px 宋體";
            cxt.fillText(textL.text, textL.position.x, textL.position.y);
            cxt.font = "bolder " + textO.fontSize + "px 宋體";
            cxt.fillText(textO.text, textO.position.x, textO.position.y);
            cxt.font = "bolder " + textA.fontSize + "px 宋體";
            cxt.fillText(textA.text, textA.position.x, textA.position.y);
            cxt.font = "bolder " + textD.fontSize + "px 宋體";
            cxt.fillText(textD.text, textD.position.x, textD.position.y);
            cxt.font = "bolder " + textI.fontSize + "px 宋體";
            cxt.fillText(textI.text, textI.position.x, textI.position.y);
            cxt.font = "bolder " + textN.fontSize + "px 宋體";
            cxt.fillText(textN.text, textN.position.x, textN.position.y);
            cxt.font = "bolder " + textG.fontSize + "px 宋體";
            cxt.fillText(textG.text, textG.position.x, textG.position.y);
            cxt.font = "bolder " + textPoint1.fontSize + "px 宋體";
            cxt.fillText(textPoint1.text, textPoint1.position.x, textPoint1.position.y);
            cxt.font = "bolder " + textPoint2.fontSize + "px 宋體";
            cxt.fillText(textPoint2.text, textPoint2.position.x, textPoint2.position.y);
            cxt.font = "bolder " + textPoint3.fontSize + "px 宋體";
            cxt.fillText(textPoint3.text, textPoint3.position.x, textPoint3.position.y);
        }

        var currentMap = 0;
        drawAllWords();
        var drawAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.clearRect(0, 0, c.width, c.height);
                drawAllWords();
                if (currentMap > 395) currentMap = 0;
                currentMap += 5;
                if (parseInt(currentMap / 40) <= text.length - 1) {
                    text[parseInt(currentMap / 40)].fontSize = 60 - currentMap % 40;

                }
                if (parseInt(currentMap / 40) + 1 <= text.length - 1) {

                    text[parseInt(currentMap / 40) + 1].fontSize = currentMap % 40 + 20;
                }
                $await(Jscex.Async.sleep(10));

            }
        }));
        drawAsync().start();

整個預覽版不到一百行代碼，因為它只是一個預覽版，離文字內容、文字大小、文字位置、輪循速度等可配置還有很大的距離。

三.在線演示

四.同步

本文已同步更新至：

HTML5實驗室【目錄】:   http://www.rzrgm.cn/iamzhanglei/archive/2011/11/06/2237870.html