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 1. Compare the Code with the 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 facilitate storage and access to 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.

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.