用仿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";  
};

二,編寫jsend庫)後的程式碼

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方法，實作如下

3，最後，還差一個Loader，我們建立自己的LLoader類

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

4，在3裡面用到了LEvent類，LEvent類是一個事件類，用來加載事件，點擊等，這個以後再慢慢強化

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

5，在顯示之前，我們需要有個addChild方法，如下

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

6，最後，在整個頁面讀取完成後，就可以把圖片顯示出來了

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

以上就是用上用ActionActionScript的文法來寫html5－第一篇，顯示一張圖片的內容，更多相關內容請關注PHP中文網（www.php.cn）！