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

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

黄舟

Freigeben： 2017-01-17 16:27:17

Original

1467 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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[&#39;e&#39; + type + fun] = fun;  
        node[type + fun] = function(){node[&#39;e&#39; + type + fun]();}  
        node.attachEvent(&#39;on&#39; + type, node[type + fun]);  
    }  
}

Nach dem Login kopieren

5. Vor der Anzeige benötigen wir eine addChild-Methode. wie folgt

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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 (m.sbmmt.com)!