用仿ActionScript的语法来编写html5——第一篇，显示一张图片

最近开始学习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);
    }
}

3，最后，还差一个Loader，我们建立自己的LLoader类

function LLoader(){
    var self = this;
    self.loadtype = "";
    self.content = null;
    self.oncomplete = null;
    self.event = {};
}
LLoader.prototype = {
    addEventListener:function(type,listener){
        var self = this;
        if(type == LEvent.COMPLETE){
            self.oncomplete = listener;
        }
    },
    load:function (src,loadtype){
        var self = this;
        self.loadtype = loadtype;
        if(self.loadtype == "bitmapData"){
            self.content = new Image();
            self.content.onload = function(){
                if(self.oncomplete){
                    self.event.currentTarget = self.content;
                    self.oncomplete(self.event);
                }
            }
            self.content.src = src;
        }
    }
}

4，在3里面用到了LEvent类，LEvent类是一个事件类，用来加载事件，点击等，这个以后再慢慢强化

var LEvent = function (){};
LEvent.COMPLETE = "complete";
LEvent.ENTER_FRAME = "enter_frame";


LEvent.currentTarget = null;
LEvent.addEventListener = function (node, type, fun){
    if(node.addEventListener){
        node.addEventListener(type, fun, false);
    }else if(node.attachEvent){
        node['e' + type + fun] = fun;
        node[type + fun] = function(){node['e' + type + fun]();}
        node.attachEvent('on' + type, node[type + fun]);
    }
}

5，在显示之前，我们需要有个addChild方法，如下

function addChild(DisplayObject){
    LGlobal.childList.push(DisplayObject);
}

6，最后，在整个页面读取完成后，就可以把图片显示出来了

function init(speed,canvasname,width,height,func){
    LEvent.addEventListener(window,"load",function(){
        setInterval(function(){LGlobal.onShow();}, speed);
        LGlobal.setCanvas(canvasname,width,height);
        func();
    });
}
init(40,"back",300,300,main);
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);
}