Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - le premier article, affiche une image

J'ai récemment commencé à apprendre le HTML5 Parce que j'ai toujours étudié le as, je pense toujours que le as est plus agréable à regarder, mais je dois apprendre le html5, alors j'ai compris que je pouvais écrire du html5 en utilisant la syntaxe de as, ce qui est bien pour créer des jeux. C'est plus pratique. Commençons le premier article

Afficher une image

1. 🎜>

Code js :

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

2. Code après avoir écrit la bibliothèque de classes js (provisoirement nommée bibliothèque de légendes)

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

3. Implémentation

1, Créez une classe statique pour faciliter l'enregistrement et l'accès aux attributs de méthode publique, tels que canevas, etc.

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

Nous utilisons toujours canevas, nous devons donc enregistrer le canevas et ajouter des attributs et des méthodes à la classe LGlobal

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

Afin d'afficher l'interface de manière dynamique, choisissez de rafraîchir continuellement le canevas
Ajoutez une méthode pour rafraîchir continuellement la classe 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");  
}

Ensuite, je attendu Enregistrez tous les objets réels dans un tableau, puis affichez-les dans l'ordre
Et tous les objets qui peuvent être affichés ont une méthode show pour se dessiner sur le canevas

La classe LGlobal a finalement été modifiée en

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

2, en as, deux classes, BitmapData et Bitmap, sont utilisées pour l'affichage des images. Afin de réaliser les fonctions de ces deux classes, nous créons respectivement deux classes LBitmapData et LBitmap

Venez d'abord. dans la classe LBitmapData. La classe LBitmapData est utilisée pour stocker les données d'image, etc. Nous stockons Image() dans la classe LBitmapData

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

Regardez la classe LBitmap est utilisée pour afficher l'image. () stocké dans la classe 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();  
    }  
}

Concernant l'affichage de Image(), nous utilisons la méthode show mentionnée au début, et l'implémentation est la suivante

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. Enfin, il y a encore plus à faire. Pour un Loader, nous créons notre propre classe 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. La classe LEvent est une classe d'événement utilisée pour charger des événements, des clics, etc. Cela sera lent à l'avenir Renforcement lent

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 Avant d'afficher, nous avons besoin d'une méthode addChild, comme suit.

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. Enfin, la page entière est lue. Après cela, vous pouvez afficher l'image

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

Ce qui précède consiste à utiliser le type ActionScript. syntaxe pour écrire html5 - le premier article, affiche le contenu d'une image, veuillez faire attention au contenu plus connexe du site Web PHP chinois (www.php.cn) !

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