仿AS语法来写HTML5—第1章，显示一张图片

最近开始学习html5，因为一直都是研究as，所以还是觉得as顺眼一点，但是html5也不能不学，于是就想出了，可以把html5用as的语法来写出来，做游戏应该来的比较顺手一些，下面开始第一篇

第一篇，显示一张图片

一，代码对比

as代码：
public var loader:Loader;  
public function loadimg():void{  
        loader = new Loader();  
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete);  
        loader.load(new URLRequest("10594855.png"));  
}  
public function complete(event:Event):void{  
        var image:Bitmap = Bitmap(loader.content);  
        var bitmap:BitmapData = image.bitmapData;  
        addChild(image);  
}  
js代码:
window.onload = function(){    
    var canvas = document.getElementById("myCanvas");    
    var context = canvas.getContext("2d");    
     
    image = new Image();    
    image.onload = function(){    
        context.drawImage(image, 0, 0, 240, 240);    
    };    
    image.src = "10594855.png";  
};  
二,编写js类库(暂命名为legend库)后的代码
var loader;  
function main(){  
        loader = new LLoader();  
        loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
        loader.load("10594855.png","bitmapData");  
}  
function loadBitmapdata(event){  
        var bitmapdata = new LBitmapData(loader.content);  
        var bitmap = new LBitmap(bitmapdata);  
        addChild(bitmap);  
}  
三,实现

1,建一个静态类,方便保存及访问公共的方法属性,比如canvas等
var LGlobal = function (){}  
LGlobal.type = "LGlobal";  
我们始终都用到canvas,所以要把canvas保存起来，给LGlobal类添加属性和方法
LGlobal.canvas = null;  
LGlobal.width = 0;  
LGlobal.height = 0;  
LGlobal.setCanvas = function (id,width,height){  
        var canvasObj = document.getElementById(id);  
        if(width)canvasObj.width = width;  
        if(height)canvasObj.height = height;  
        LGlobal.width = canvasObj.width;  
        LGlobal.height = canvasObj.height;  
        LGlobal.canvas = canvasObj.getContext("2d");  
}  
界面的显示，为了能够动态显示，选择不停的刷新canvas
给LGlobal类添加一个不停刷新的方法
LGlobal.onShow = function (){  
        if(LGlobal.canvas == null)return;  
        LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
}  
然后，我预想把所有现实的对象等都保存在一个数组里面，然后按照顺序显示
而所有可以显示的对象，都有一个show方法，用来把自己画到canvas上
LGlobal类最后修改为
var LGlobal = function (){}  
LGlobal.type = "LGlobal";  
LGlobal.canvas = null;  
LGlobal.width = 0;  
LGlobal.height = 0;  
LGlobal.childList = new Array();  
LGlobal.setCanvas = function (id,width,height){  
        var canvasObj = document.getElementById(id);  
        if(width)canvasObj.width = width;  
        if(height)canvasObj.height = height;  
        LGlobal.width = canvasObj.width;  
        LGlobal.height = canvasObj.height;  
        LGlobal.canvas = canvasObj.getContext("2d");  
}   
LGlobal.onShow = function (){  
        if(LGlobal.canvas == null)return;  
        LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
        LGlobal.show(LGlobal.childList);  
}  
LGlobal.show = function(showlist){  
        var key;  
        for(key in showlist){  
                if(showlist[key].show){  
                        showlist[key].show();  
                }  
        }  
}  
2,as中，图片显示用到BitmapData和Bitmap两个类，为了实现这两个类的功能，我们分别创建两个类LBitmapData和LBitmap

先来看LBitmapData类，LBitmapData类用来储存图片的数据等，我们把Image()储存到LBitmapData类里面
function LBitmapData(image,x,y,width,height){  
        var self = this;  
        self.type = "LBitmapData";  
        self.oncomplete = null;  
        if(image){  
                self.image = image;  
                self.x = (x==null?0:x);    
                self.y = (y==null?0:y);    
                self.width = (width==null?self.image.width:width);    
                self.height = (height==null?self.image.height:height);  
        }else{  
                self.x = 0;    
                self.y = 0;    
                self.width = 0;    
                self.height = 0;  
                self.image = new Image();  
        }  
}  
在看LBitmap类，LBitmap类用来显示LBitmapData类里储存的Image()

function LBitmap(bitmapdata){  
        var self = this;  
        self.type = "LBitmap";  
        self.x = 0;    
        self.y = 0;    
        self.width = 0;    
        self.height = 0;    
        self.scaleX=1;  
        self.scaleY=1;  
        self.visible=true;  
        self.bitmapData = bitmapdata;   
        if(self.bitmapData){  
                self.width = self.bitmapData.width;  
                self.height = self.bitmapData.height;  
        }  
}  
关于Image()的显示，我们用到一开始说的show方法，实现如下

LBitmap.prototype = {  
        show:function (){  
                var self = this;  
                if(!self.visible)return;  
                LGlobal.canvas.drawImage(self.bitmapData.image,  
                                self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height,  
                                self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);  
        }  
}  
详细说明：http://html5.662p.com/thread-25-1-1.html