Imitate as syntax to write html5-the 1th chapter, showing a picture

Recently began to learn HTML5, because has always been research as, so still feel as pleasing to a point, but HTML5 can not learn, so I came up with, you can put HTML5 as the syntax to write out, do the game should come more comfortable, below the beginning of the first article

First, show a picture

One, code comparison

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";
};
Second, write the JS class library (temporarily named Legend Library) after the code
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);
}
Third, to achieve

1, build a static class, easy to save and access public method properties, such as canvas, etc.
var lglobal = function () {}
Lglobal.type = "Lglobal";
We always use canvas, so we need to save the canvas and add properties and methods to the Lglobal class.
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");
}
The display of the interface, in order to be able to display dynamically, choose to constantly refresh the canvas
Add a constant Refresh method to the Lglobal class
Lglobal.onshow = function () {
if (Lglobal.canvas = = null) return;
LGlobal.canvas.clearRect (0,0,lglobal.width,lglobal.height);
}
Then I expected to keep all the real objects in an array, and then show them in order.
And all the objects that can be displayed have a show method to draw themselves onto the canvas
Lglobal Class Last modified to
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, the picture shows the use of the BitmapData and bitmap two classes, in order to implement the functions of these two classes, we created two classes Lbitmapdata and Lbitmap respectively

First look at the Lbitmapdata class, Lbitmapdata class used to store image data, etc., we put the image () into the Lbitmapdata class inside
function Lbitmapdata (image,x,y,width,height) {
var = 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 ();
}
}
Looking at the Lbitmap class, the Lbitmap class is used to display the image stored in the Lbitmapdata class ()

function Lbitmap (bitmapdata) {
var = 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;
}
}
With regard to the display of image (), we used the Show method at the beginning to achieve the following

Lbitmap.prototype = {
Show:function () {
var = 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);
}
}
Detailed Description: http://html5.662p.com/thread-25-1-1.html

Imitate as syntax to write html5-the 1th chapter, showing a picture