ActionScript のような構文を使用して html5 を記述する - 最初の記事、画像を表示する

私は最近 html5 を勉強し始めました。ずっと as を勉強してきたので、今でも as の方が見た目に美しいと思っていますが、html5 を学ばなければならないので、as の構文を使用して html5 を書くことができるという考えを思いつきました。わかりやすくするために、最初の記事から始めましょう

1. コード比較

as code:

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 code:

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

2. js クラス ライブラリ (仮称凡例ライブラリ) )

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

Three の後のコード、

1 を実装し、canvas などのパブリック メソッド属性の保存とアクセスを容易にする静的クラスを構築します。

var LGlobal = function (){}  
LGlobal.type = "LGlobal";

私たちは常に 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");  
}

インターフェースを動的に表示するには、キャンバスを常に更新することを選択します

LGlobal クラスを継続的に更新するメソッドを追加します

LGlobal.onShow = function (){  
    if(LGlobal.canvas == null)return;  
    LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
}

次に, すべての実際のオブジェクトなどを配列に保存し、順番に表示することを想定しています

そして、表示できるすべてのオブジェクトには、キャンバス上に描画するために使用される show メソッドがあります

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 では、BitmapData は画像表示と Bitmap に使用されます。これら 2 つのクラスの機能を実現するために、LBitmapData クラスと LBitmap クラスをそれぞれ作成します。 LBitmapDataにImage()を格納します。 クラス内では、

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クラスを参照して、LBitmapDataクラスに格納されているImage()を表示します。 Image() の表示には、冒頭で述べた show メソッドを使用します

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

3. 最後に、独自の 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

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

上記は、ActionScript を模倣して、HTML5 を記述する構文を使用します - 最初の記事、画像のコンテンツを表示します。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。