用仿ActionScript的语法来编写html5——第一篇，显示一张图片

最近开始学习html5，因为一直都是研究as，所以还是觉得as顺眼一点，但是html5也不能不学，于是就想出了，可以把html5用as的语法来写出来，做游戏应该来的比较顺手一些，下面开始第一篇

第一篇，显示一张图片

一，代码对比

as代码：

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代码:

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

二,编写js类库(暂命名为legend库)后的代码

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

三,实现

1,建一个静态类,方便保存及访问公共的方法属性,比如canvas等

var LGlobal = function (){} LGlobal.type = "LGlobal";
我们始终都用到canvas,所以要把canvas保存起来，给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"); }
界面的显示，为了能够动态显示，选择不停的刷新canvas
给LGlobal类添加一个不停刷新的方法
LGlobal.onShow = function (){ if(LGlobal.canvas == null)return; LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height); }
然后，我预想把所有现实的对象等都保存在一个数组里面，然后按照顺序显示
而所有可以显示的对象，都有一个show方法，用来把自己画到canvas上
LGlobal类最后修改为
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中，图片显示用到BitmapData和Bitmap两个类，为了实现这两个类的功能，我们分别创建两个类LBitmapData和LBitmap

先来看LBitmapData类，LBitmapData类用来储存图片的数据等，我们把Image()储存到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(); } }
在看LBitmap类，LBitmap类用来显示LBitmapData类里储存的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; } }
关于Image()的显示，我们用到一开始说的show方法，实现如下
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，最后，还差一个Loader，我们建立自己的LLoader类
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，在3里面用到了LEvent类，LEvent类是一个事件类，用来加载事件，点击等，这个以后再慢慢强化
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，在显示之前，我们需要有个addChild方法，如下
function addChild(DisplayObject){ LGlobal.childList.push(DisplayObject); }
6，最后，在整个页面读取完成后，就可以把图片显示出来了
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); }

第一篇完成，下一篇，实现Sprite类