HTML5实验室【四十】—Jscex版Loading插件V11.12.05发布

一.简介

本插件适用于基于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();

 

四.在线演示

Your browser does not support the canvas element.

 

五.同步

同步更新至：HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html