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