用仿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，最后，在整个页面读取完成后，就可以把图片显示出来了

www.2cto.com

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); 

} 

 

 

第一篇完成，下一篇，实现Sprite类

摘自 lufy小屋