一.简介
本插件适用于基于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.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html