Write html5 using the syntax similar to ActionScript-the first article shows an image

 

Recently I started to study html5. I have been studying as for a long time, so I still think it is a bit pleasing to the eye, but html5 cannot be learned. So I came up with the idea that I can use the as syntax to write html5, playing games should be easier. The first article is as follows:

 

 

 

Article 1: display an image

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

};

 

2. Compile the code after the js class library (temporarily named as the legend Library)

 

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. Implementation

1. Create a static class to save and access common method attributes, such as canvas.

 

Var LGlobal = function (){}

LGlobal. type = "LGlobal ";

 

We always use the canvas, so we need to save the canvas and add attributes 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 ");

}

 

For dynamic display, you can choose to constantly refresh the canvas.

Add a non-stop 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 save all the actual objects in an array and display them in order.

All objects that can be displayed have a show method to draw a canvas.

Last modified the LGlobal class

 

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, BitmapData and Bitmap are used for image display. To implement the functions of these two classes, we create two classes: LBitmapData and LBitmap.

Let's take a look at the LBitmapData class. The LBitmapData class is used to store Image data. We store Image () in the LBitmapData class.

 

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

}

}

 

In the LBitmap class, the LBitmap class is used to display the Image () stored in the LBitmapData class ()

 

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;

}

}

 

For the display of Image (), we use the show method in the beginning to implement the following:

 

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. Finally, we have another Loader. We have built our own LLoader class.

 

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. The LEvent class is used in 3. The LEvent class is an event class used to load events and click events. This will be further strengthened later.

 

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. Before the display, we need to have an addChild method, as shown below:

 

Function addChild (DisplayObject ){

LGlobal. childList. push (DisplayObject );

}

 

6. After reading the entire page, you can display the image.

Www.2cto.com

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

}

 

 

The first article is complete, and the next article is to implement the Sprite class.

From lufy hut