HTML5 Canvas游戏开发（三）lufylegend开源库件(上)

　　lufylegend可以解决HTML5开发游戏中会遇到的一些问题：

　　1、各种浏览器对于JavaScript和HTML的解析是不一致的。

　　2、手机浏览器和PC浏览器的区别。

　　3、JavaScript并非面向对象编程，影响了代码的可读性。

　　使用开源库件之前先进行初始化，在带中链接框架，并且在HTML中加上以下代码

<div id="mylegend">loading...</div>

　　接下来使用库件内置的init方法进行初始化。init函数的原型如下：

　　init(speed,divid,width,height,completeFunc,type);

　　参数：speed:游戏速度设定。

　　divid：传入一个div 的ID，库件初始化时，会将canvas加入到此div内部。

　　width：游戏界面宽。

　　height：游戏界面高。

　　completeFunc：游戏初始化完成后，调用此函数。

　　一、图片的加载与显示

　　用库件显示图片时，可分为以下几个步骤：

　　1、使用Lloader类加载图片数据。

　　2、将读取完的图片数据保存到LbitmapData中。

　　3、利用Lbitmap将图片显示到画板上。

function main(){
        loader = new LLoader();
        loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
        loader.load("1.jpg","bitmapData");
    }
    function loadBitmapdata(){
        var bitmapdata = new LBitmapData(loader.content,50,50,150,150);
        var bitmap = new LBitmap(bitmapdata);
        addChild(bitmap);
    }

　　main函数就是加载图片，在图片读取完成之后调用loadBitmapdata函数，而此时的loader.content就是一个Image。

　　LBitmapData是库中的一个类，用来保存和读取Image对象。如果要将图片显示到canvas画板上，则需要调用LBitmap类。

　　addChild函数是将对象添加到canvas画板上，被添加的对象会按照添加的先后顺序依次显示。

　　1、LBitmapData对象：

　　构造器：LBitmapData(image,x,y,width,height)

　　参数：image:Image对象。

　　x：Image可视范围x坐标。

　　y：Image可视范围y坐标。

　　width、height：可视范围宽和高。

　　2、LBitmap对象：控制图片的各种属性。

　　坐标X、Y。透明度、旋转角度、缩放等属性。

　　3、层的概念

　　使用LSprite对象。该对象有坐标、透明度、旋转、缩放等属性，不过控制的是整个层的属性。

var layer = new LSprite();
addChild(layer);

　　4、使用LGraphics对象绘图

　　1.绘制矩形：

　　利用LGraphics对象中的drawRect函数绘制矩形。

　　drawRect(thickness,lineColor,pointArray,isfill,color)

　　参数：thickness：边框线宽。

　　lineColor：边框颜色。

　　pointArray：矩形范围数组[坐标X、坐标Y、长、宽]。

　　isfill：是否填充矩形。

　　color：填充颜色。

var graphics = new LGraphics();   //建立一个绘图对象
addChild(graphics);      //将其加载到canvas画板上
graphics.drawRect(1,'#00000',[50,50,100,100]);  //绘制一个空心矩形
graphics.drawRect(1,'#00000',[170,50,100,100],true,'#cccccc');  //绘制一个填充矩形

　　2.绘制圆

　　使用drawArc函数绘制圆。

　　drawArc(thickness,lineColor,pointArray.isfill,color)。参数的意义同drawRcet（）函数，就不再一一说明。

　　3.绘制任意多边形

　　drawVertices(thickness,lineColor,vertices,isfill,color)。

　　其中的vertices参数：顶点数组[[顶点1]，[顶点2]，[顶点3]...]。

　　4.使用canvas原始绘图函数进行绘图

function main(){
    var graphics = new LGraphics();
    addChild(graphics);
    graphics.add(function(coodx,coody){
        LGlobal.canvas.strokeStyle = "#000000";
        LGlobal.canvas.moveTo(20,20);
        LGlobal.canvas.lineTo(200,200);
        LGlobal.canvas.stroke();
    });
}  

　　5.使用LSprite对象进行绘图

　　上面讲述的是使用LGraphics对象进行绘图。而每个LSprite对象中都包含一个LGraphics对象。所以上面的功能也可以通过调用LSprite对象中的LGraphics来实现。

function main(){
   var layer = new LSprite();
   addChild(layer);
   layer.graphics.drawRect(1,'#000000',[50,50,100,100]);
   layer.graphics.drawRect(1,'#000000',[170,50,100,100],true,'#cccccc');
}  

　　6.利用LGraphics对象绘制图片

　　（1）绘制一个矩形区域的图片

　　LGraphics对象的beginBitmapFill函数可以和drawArc函数结合使用。

function main(){
    loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
    loader.load("face.jpg","bitmapData");
}
function loadBitmapdata(event){
    var bitmapdata = new LBitmapData(loader.content);
    var backLayer = new LSprite();
    addChild(backLayer);
    backLayer.graphics.beginBitmapFill(bitmapdata);
    backLayer.graphics.drawRect(1,"#000",[80,50,70,100]);
}

　　利用beginBitmapFill函数将LBitmapData对象储存在LGraphics对象中。再绘制一个矩形区域，LGraphics对象会直接将储存在自己内部的LBitmapData对象通过这个矩形区域显示出来。

　　（二）绘制圆形、多边形区域的图片

　　方法同上，只不过将矩形中的drawRcet（）函数换成drawArc（）函数和drawVertices（）函数。

　　（三）绘制一个扭曲的图片

　　drawTriangles（vertices,indices,uvtData,thickness,color）

　　参数：vertices:有数字构成的矢量，其中每一对数字将被视为一个坐标位置。

　　indices：由整数或者索引构成的矢量，其中每三个索引定义一个三角形。

　　uvtData：用于应用纹理映射的标准坐标构成的矢量。

　　thickness：分割完的三角形边框线宽。

　　color：分割完的三角形边框颜色。

function main(){
    loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
    loader.load("face.jpg","bitmapData");
}
function loadBitmapdata(event){
    var bitmapdata = new LBitmapData(loader.content);
    var backLayer = new LSprite();
    backLayer.x=100;
    addChild(backLayer);
 
    vertices = new Array();    //存储了顶点的坐标
    vertices.push(0, 0);
    vertices.push(0-50, 120);//这里将原坐标的x坐标左移50
    vertices.push(0, 240);
    vertices.push(120, 0);
    vertices.push(120, 120);
    vertices.push(120, 240);
    vertices.push(240, 0);
    vertices.push(240+50, 120);//这里将原坐标的x坐标右移50
    vertices.push(240, 240);
 
    indices = new Array();       //定义三角形  在数组vertices中取三个数组成三角形
    indices.push(0, 3, 1);
    indices.push(3, 1, 4);
    indices.push(1, 4, 2);
    indices.push(4, 2, 5);
    indices.push(3, 6, 4);
    indices.push(6, 4, 7);
    indices.push(4, 7, 5);
    indices.push(7, 5, 8);
 
    uvtData = new Array();   //定义每个点相对于整个图的比例
    uvtData.push(0, 0);
    uvtData.push(0, 0.5);
    uvtData.push(0, 1);
    uvtData.push(0.5, 0);
    uvtData.push(0.5, 0.5);
    uvtData.push(0.5, 1);
    uvtData.push(1, 0);
    uvtData.push(1, 0.5);
    uvtData.push(1, 1);
 
    backLayer.graphics.beginBitmapFill(bitmapdata);
    backLayer.graphics.drawTriangles(vertices, indices, uvtData);
}