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

百变鹏仔 2个月前 (10-19) #H5教程

文章标签第一篇

最近开始学习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[&#39;e&#39; + type + fun] = fun;          node[type + fun] = function(){node[&#39;e&#39; + type + fun]();}          node.attachEvent(&#39;on&#39; + 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);  }

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集