Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben. Im ersten Artikel wird ein Bild angezeigt

Ich habe vor Kurzem angefangen, HTML5 zu lernen, und denke immer noch, dass as optisch ansprechender ist, aber ich muss HTML5 lernen, also habe ich herausgefunden, dass ich HTML5 mit der Syntax von as schreiben kann. Das ist gut zum Erstellen von Spielen. Beginnen wir mit dem ersten Artikel

Der erste Artikel zeigt ein Bild

1, Code-Vergleich

als 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. Code nach dem Schreiben der js-Klassenbibliothek (vorläufig benannte Legendenbibliothek)

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

3. Implementierung

1. Erstellen Sie eine statische Klasse, um das Speichern und Zugreifen auf öffentliche Methodenattribute wie Canvas usw. zu erleichtern.

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

Wir verwenden immer Canvas, daher müssen wir Canvas speichern und Attribute und Methoden hinzufügen LGlobal-Klasse

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

Um die Schnittstelle dynamisch anzuzeigen, wählen Sie die kontinuierliche Aktualisierung der Leinwand
Fügen Sie eine Methode hinzu, um die LGlobal-Klasse kontinuierlich zu aktualisieren

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

Dann Ich habe erwartet, dass alle realen Objekte in einem Array gespeichert und dann der Reihe nach angezeigt werden.
Und alle Objekte, die angezeigt werden können, verfügen über eine Show-Methode, um sich selbst auf der Leinwand zu zeichnen.
Die LGlobal-Klasse wurde schließlich in

geändert

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, in as werden zwei Klassen, BitmapData und Bitmap, für die Bildanzeige verwendet. Um die Funktionen dieser beiden Klassen zu realisieren, erstellen wir zwei Klassen LBitmapData bzw. LBitmap

Kommen Schauen Sie sich zuerst die LBitmapData-Klasse an. Die LBitmapData-Klasse wird zum Speichern von Bilddaten usw. verwendet. Wir speichern Image() in der LBitmapData-Klasse.

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

Sehen Sie sich die LBitmap-Klasse an das in der LBitmapData-Klasse gespeicherte 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;  
    }  
}

In Bezug auf die Anzeige von Image() verwenden wir die eingangs erwähnte Show-Methode und die Implementierung ist wie folgt

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. Zum Schluss gibt es noch mehr zu tun. Für einen Loader erstellen wir unsere eigene LLoader-Klasse

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. Die LEvent-Klasse wird in 3 verwendet . Die LEvent-Klasse ist eine Ereignisklasse, die zum Laden von Ereignissen, Klicks usw. verwendet wird. Dies wird in Zukunft langsam sein.

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. Vor der Anzeige benötigen wir eine addChild-Methode. wie folgt

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

6. Anschließend können Sie das Bild anzeigen

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

Das Obige dient dazu, ActionScript zu verwenden -ähnliche Syntax zum Schreiben von HTML5 - Der erste Artikel zeigt den Inhalt eines Bildes an. Bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website (www.php.cn)!