一.简介

在大量游戏制作过程当中，必不可少的一个重要元素就是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();

整个预览版不到一百行代码，因为它只是一个预览版，离文字内容、文字大小、文字位置、轮循速度等可配置还有很大的距离。

 

三.在线演示

Your browser does not support the canvas element.

 

四.同步

本文已同步更新至：