用仿ActionScript的语法来编写html5

最近开始学习html5，因为一直都是研究as，所以还是觉得as顺眼一点，但是html5也不能不学，于是就想出了，可以把html5用as的语法来写出来，做游戏应该来的比较顺手一些，下面开始第一篇第一篇，显示一张图片一，代码对比as代码：1public var loader:Loader;2public function loadimg():void{3 loader = new Loader();4 loader.contentLoaderInfo.addEventListener(PLETE,complete);5 loader.load(new URLRequest("10594855.png"));6}7public function complete(event:Event):void{8 var image:Bitmap = Bitmap(loader.content);9 var bitmap:BitmapData = image.bitmapData;10 addChild(image);11}复制代码js代码:12window.onload = function(){13 var canvas = document.getElementById("myCanvas");14 var context = canvas.getContext("2d");1516 image = new Image();17 image.onload = function(){18 context.drawImage(image, 0, 0, 240, 240);19 };20 image.src = "10594855.png";21};复制代码二,编写js类库(暂命名为legend库)后的代码22var loader;23function main(){24 loader = new LLoader();25 loader.addEventListener(PLETE,loadBitmapdata);26 loader.load("10594855.png","bitmapData");27}28function loadBitmapdata(event){29 var bitmapdata = new LBitmapData(loader.content);30 var bitmap = new LBitmap(bitmapdata);31 addChild(bitmap);32}复制代码三,实现1,建一个静态类,方便保存及访问公共的方法属性,比如canvas等33var LGlobal = function (){}34LGlobal.type = "LGlobal";复制代码我们始终都用到canvas,所以要把canvas保存起来，给LGlobal类添加属性和方法35LGlobal.canvas = null;36LGlobal.width = 0;37LGlobal.height = 0;38LGlobal.setCanvas = function (id,width,height){39 var canvasObj = document.getElementById(id);40 if(width)canvasObj.width = width;41 if(height)canvasObj.height = height;42 LGlobal.width = canvasObj.width;43 LGlobal.height = canvasObj.height;44 LGlobal.canvas = canvasObj.getContext("2d");45}复制代码界面的显示，为了能够动态显示，选择不停的刷新canvas给LGlobal类添加一个不停刷新的方法46LGlobal.onShow = function (){47 if(LGlobal.canvas == null)return;48 LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);49}复制代码然后，我预想把所有现实的对象等都保存在一个数组里面，然后按照顺序显示而所有可以显示的对象，都有一个show方法，用来把自己画到canvas上LGlobal类最后修改为50var LGlobal = function (){}51LGlobal.type = "LGlobal";52LGlobal.canvas = null;53LGlobal.width = 0;54LGlobal.height = 0;55LGlobal.childList = new Array();56LGlobal.setCanvas = function (id,width,height){57 var canvasObj = document.getElementById(id);58 if(width)canvasObj.width = width;59 if(height)canvasObj.height = height;60 LGlobal.width = canvasObj.width;61 LGlobal.height = canvasObj.height;62 LGlobal.canvas = canvasObj.getContext("2d");63}64LGlobal.onShow = function (){65 if(LGlobal.canvas == null)return;66 LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);67 LGlobal.show(LGlobal.childList);68}69LGlobal.show = function(showlist){70 var key;71 for(key in showlist){72 if(showlist[key].show){73 showlist[key].show();74 }75 }76}复制代码2,as中，图片显示用到BitmapData和Bitmap两个类，为了实现这两个类的功能，我们分别创建两个类LBitmapData和LBitmap先来看LBitmapData类，LBitmapData类用来储存图片的数据等，我们把Image()储存到LBitmapData类里面77function LBitmapData(image,x,y,width,height){78 var self = this;79 self.type = "LBitmapData";80 self.oncomplete = null;81 if(image){82 self.image = image;83 self.x = (x==null?0:x);84 self.y = (y==null?0:y);85 self.width = (width==null?self.image.width:width);86 self.height = (height==null?self.image.height:height);87 }else{88 self.x = 0;89 self.y = 0;90 self.width = 0;91 self.height = 0;92 self.image = new Image();93 }94}复制代码在看LBitmap类，LBitmap类用来显示LBitmapData类里储存的Image() 95function LBitmap(bitmapdata){96 var self = this;97 self.type = "LBitmap";98 self.x = 0;99 self.y = 0;100 self.width = 0;101 self.height = 0;102 self.scaleX=1;103 self.scaleY=1;104 self.visible=true;105 self.bitmapData = bitmapdata;106 if(self.bitmapData){107 self.width = self.bitmapData.width;108 self.height = self.bitmapData.height;109 }110}复制代码关于Image()的显示，我们用到一开始说的show方法，实现如下111LBitmap.prototype = {112 show:function (){113 var self = this;114 if(!self.visible)return;115 LGlobal.canvas.drawImage(self.bitmapData.image,116self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height, 117self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);118 }119}复制代码3，最后，还差一个Loader，我们建立自己的LLoader类120function LLoader(){121 var self = this;122 self.loadtype = "";123 self.content = null;124 self.oncomplete = null;125 self.event = {};126}127LLoader.prototype = {128 addEventListener:function(type,listener){129 var self = this;130 if(type == PLETE){131 self.oncomplete = listener;132 }133 },134 load:function (src,loadtype){135 var self = this;136 self.loadtype = loadtype;137 if(self.loadtype == "bitmapData"){138 self.content = new Image();139 self.content.onload = function(){140 if(self.oncomplete){141 self.event.currentTarget = self.content;142 self.oncomplete(self.event);143 }144 }145 self.content.src = src;146 }147 }148}复制代码4，在3里面用到了LEvent类，LEvent类是一个事件类，用来加载事件，点击等，这个以后再慢慢强化149var LEvent = function (){};PLETE = "complete";151LEvent.ENTER_FRAME = "enter_frame";152153154LEvent.currentTarget = null;155LEvent.addEventListener = function (node, type, fun){156 if(node.addEventListener){157 node.addEventListener(type, fun, false);158 }else if(node.attachEvent){159 node['e' + type + fun] = fun;160 node[type + fun] = function(){node['e' + type + fun]();}161 node.attachEvent('on' + type, node[type + fun]);162 }163}复制代码5，在显示之前，我们需要有个addChild方法，如下164function addChild(DisplayObject){165 LGlobal.childList.push(DisplayObject);166}复制代码6，最后，在整个页面读取完成后，就可以把图片显示出来了167function init(speed,canvasname,width,height,func){168 LEvent.addEventListener(window,"load",function(){169 setInterval(function(){LGlobal.onShow();}, speed);170 LGlobal.setCanvas(canvasname,width,height);171 func();172 });173}174init(40,"back",300,300,main);175var loader;176function main(){177 loader = new LLoader();178 loader.addEventListener(PLETE,loadBitmapdata);179 loader.load("10594855.png","bitmapData");180}181function loadBitmapdata(event){182 var bitmapdata = new LBitmapData(loader.content);183 var bitmap = new LBitmap(bitmapdata);184 addChild(bitmap);185}复制代码第一篇完成，下一篇，实现Sprite类上一篇，我已经模仿as，加入了L Bitmap和L BitmapData类，并且用它们实现了静态图片的显示。