一.簡介

本插件適用于基于Canvas的游戲loading過程中的顯示。

更新內容：

a.loading顯示的文字可配置

b.文字大小可配置

c.文字位置可配置

d.文字與文字的間距可配置

e.文字顏色、字體、是否加粗可配置

二.插件源碼

        Vector2 = function (x, y) {
            this.x = x || 0;
            this.y = y || 0;
        };
        Loading = function (text, fontSize, color, position, interval, font, bolder) {
            this.text = text;
            this.fontSize = fontSize;
            this.color = color;
            this.position = position;
            this.interval = interval;
            this.font = font;
            this.bolder = bolder;
        }

        Loading.prototype.init = function () {
            var text = [];
            var _this = this;
            var words = _this.text.split("");
            for (i in words) {
                text.push({
                    "text": words[i],
                    "fontSize": _this.fontSize,
                    "color": _this.color,
                    "position": new Vector2(_this.position.x + i * _this.interval, _this.position.y),
                    "font": _this.font,
                    "bolder":_this.bolder
                });

            }
            return text;
        }

三.插件使用示例(推薦使用Jscex調用)

        var l = new Loading("正在努力加載中...", 30, "#ffffff", new Vector2(20, 80), 30, "宋體", "bolder");
        var loading = l.init();
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#ffffff";
        function drawAllWords() {
            for (i in loading) {
                cxt.font = loading[i].bolder + " " + loading[i].fontSize + "px " + loading[i].font;
                cxt.fillText(loading[i].text, loading[i].position.x, loading[i].position.y);
            }

        }
        var currentMap = 0;
        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) <= loading.length - 1) {
                        loading[parseInt(currentMap / 40)].fontSize = 2*l.fontSize - currentMap % 40;
                    }
                    if (parseInt(currentMap / 40) + 1 <= loading.length - 1) {

                        loading[parseInt(currentMap / 40) + 1].fontSize = currentMap % 40 + l.fontSize;
                    }
              
                $await(Jscex.Async.sleep(10));
            }
        }));
        drawAsync().start();

四.在線演示

五.同步

同步更新至：HTML5實驗室【目錄】:   http://www.rzrgm.cn/iamzhanglei/archive/2011/11/06/2237870.html