首页 > 代码库 > 用仿ActionScript的语法来编写html5——第一篇，显示一张图片

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

2024-08-14 10:27:44   210人阅读

本文为 兄弟连IT教育 机构官方 HTML5培训 教程

目录

  1. 第一篇显示一张图片
    1. 一代码对比
    2. 二编写js类库暂命名为legend库后的代码
    3. 三实现
      1. 1建一个静态类方便保存及访问公共的方法属性比如canvas等
      2. 2as中图片显示用到BitmapData和Bitmap两个类为了实现这两个类的功能我们分别创建两个类LBitmapData和LBitmap
    4. 第一篇完成下一篇实现Sprite类
 

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

 

 

第一篇，显示一张图片

一，代码对比

as代码：
[java] view plain copy
 
  1. public var loader:Loader;  
  2. public function loadimg():void{  
  3.     loader = new Loader();  
  4.     loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete);  
  5.     loader.load(new URLRequest("10594855.png"));  
  6. }  
  7. public function complete(event:Event):void{  
  8.     var image:Bitmap = Bitmap(loader.content);  
  9.     var bitmap:BitmapData = image.bitmapData;  
  10.     addChild(image);  
  11. }  

js代码:
[javascript] view plain copy
 
  1. window.onload = function(){    
  2.     var canvas = document.getElementById("myCanvas");    
  3.     var context = canvas.getContext("2d");    
  4.      
  5.     image = new Image();    
  6.     image.onload = function(){    
  7.         context.drawImage(image, 0, 0, 240, 240);    
  8.     };    
  9.     image.src = "10594855.png";  
  10. };  

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

[javascript] view plain copy
 
  1. var loader;  
  2. function main(){  
  3.     loader = new LLoader();  
  4.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
  5.     loader.load("10594855.png","bitmapData");  
  6. }  
  7. function loadBitmapdata(event){  
  8.     var bitmapdata = new LBitmapData(loader.content);  
  9.     var bitmap = new LBitmap(bitmapdata);  
  10.     addChild(bitmap);  
  11. }  

三,实现

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

[javascript] view plain copy
 
  1. var LGlobal = function (){}  
  2. LGlobal.type = "LGlobal";  

我们始终都用到canvas,所以要把canvas保存起来，给LGlobal类添加属性和方法
[javascript] view plain copy
 
  1. LGlobal.canvas = null;  
  2. LGlobal.width = 0;  
  3. LGlobal.height = 0;  
  4. LGlobal.setCanvas = function (id,width,height){  
  5.     var canvasObj = document.getElementById(id);  
  6.     if(width)canvasObj.width = width;  
  7.     if(height)canvasObj.height = height;  
  8.     LGlobal.width = canvasObj.width;  
  9.     LGlobal.height = canvasObj.height;  
  10.     LGlobal.canvas = canvasObj.getContext("2d");  
  11. }   

界面的显示，为了能够动态显示，选择不停的刷新canvas
给LGlobal类添加一个不停刷新的方法
[javascript] view plain copy
 
  1. LGlobal.onShow = function (){  
  2.     if(LGlobal.canvas == null)return;  
  3.     LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
  4. }  

然后，我预想把所有现实的对象等都保存在一个数组里面，然后按照顺序显示
而所有可以显示的对象，都有一个show方法，用来把自己画到canvas上
LGlobal类最后修改为
[javascript] view plain copy
 
  1. var LGlobal = function (){}  
  2. LGlobal.type = "LGlobal";  
  3. LGlobal.canvas = null;  
  4. LGlobal.width = 0;  
  5. LGlobal.height = 0;  
  6. LGlobal.childList = new Array();  
  7. LGlobal.setCanvas = function (id,width,height){  
  8.     var canvasObj = document.getElementById(id);  
  9.     if(width)canvasObj.width = width;  
  10.     if(height)canvasObj.height = height;  
  11.     LGlobal.width = canvasObj.width;  
  12.     LGlobal.height = canvasObj.height;  
  13.     LGlobal.canvas = canvasObj.getContext("2d");  
  14. }   
  15. LGlobal.onShow = function (){  
  16.     if(LGlobal.canvas == null)return;  
  17.     LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
  18.     LGlobal.show(LGlobal.childList);  
  19. }  
  20. LGlobal.show = function(showlist){  
  21.     var key;  
  22.     for(key in showlist){  
  23.         if(showlist[key].show){  
  24.             showlist[key].show();  
  25.         }  
  26.     }  
  27. }  

2,as中，图片显示用到BitmapData和Bitmap两个类，为了实现这两个类的功能，我们分别创建两个类LBitmapData和LBitmap

先来看LBitmapData类，LBitmapData类用来储存图片的数据等，我们把Image()储存到LBitmapData类里面
[javascript] view plain copy
 
  1. function LBitmapData(image,x,y,width,height){  
  2.     var self = this;  
  3.     self.type = "LBitmapData";  
  4.     self.oncomplete = null;  
  5.     if(image){  
  6.         self.image = image;  
  7.         self.x = (x==null?0:x);    
  8.         self.y = (y==null?0:y);    
  9.         self.width = (width==null?self.image.width:width);    
  10.         self.height = (height==null?self.image.height:height);  
  11.     }else{  
  12.         self.x = 0;    
  13.         self.y = 0;    
  14.         self.width = 0;    
  15.         self.height = 0;  
  16.         self.image = new Image();  
  17.     }  
  18. }  

在看LBitmap类，LBitmap类用来显示LBitmapData类里储存的Image()
[javascript] view plain copy
 
  1. function LBitmap(bitmapdata){  
  2.     var self = this;  
  3.     self.type = "LBitmap";  
  4.     self.x = 0;    
  5.     self.y = 0;    
  6.     self.width = 0;    
  7.     self.height = 0;    
  8.     self.scaleX=1;  
  9.     self.scaleY=1;  
  10.     self.visible=true;  
  11.     self.bitmapData = bitmapdata;   
  12.     if(self.bitmapData){  
  13.         self.width = self.bitmapData.width;  
  14.         self.height = self.bitmapData.height;  
  15.     }  
  16. }  

关于Image()的显示，我们用到一开始说的show方法，实现如下
[javascript] view plain copy
 
  1. LBitmap.prototype = {  
  2.     show:function (){  
  3.         var self = this;  
  4.         if(!self.visible)return;  
  5.         LGlobal.canvas.drawImage(self.bitmapData.image,  
  6.                 self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height,  
  7.                 self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);  
  8.     }  
  9. }  

3，最后，还差一个Loader，我们建立自己的LLoader类
[javascript] view plain copy
 
  1. function LLoader(){  
  2.     var self = this;  
  3.     self.loadtype = "";  
  4.     self.content = null;  
  5.     self.oncomplete = null;  
  6.     self.event = {};  
  7. }  
  8. LLoader.prototype = {  
  9.     addEventListener:function(type,listener){  
  10.         var self = this;  
  11.         if(type == LEvent.COMPLETE){  
  12.             self.oncomplete = listener;  
  13.         }  
  14.     },  
  15.     load:function (src,loadtype){  
  16.         var self = this;  
  17.         self.loadtype = loadtype;  
  18.         if(self.loadtype == "bitmapData"){  
  19.             self.content = new Image();  
  20.             self.content.onload = function(){  
  21.                 if(self.oncomplete){  
  22.                     self.event.currentTarget = self.content;  
  23.                     self.oncomplete(self.event);  
  24.                 }  
  25.             }  
  26.             self.content.src = src;   
  27.         }  
  28.     }  
  29. }  

4，在3里面用到了LEvent类，LEvent类是一个事件类，用来加载事件，点击等，这个以后再慢慢强化
[javascript] view plain copy
 
  1. var LEvent = function (){};  
  2. LEvent.COMPLETE = "complete";  
  3. LEvent.ENTER_FRAME = "enter_frame";  
  4.   
  5.   
  6. LEvent.currentTarget = null;  
  7. LEvent.addEventListener = function (node, type, fun){  
  8.     if(node.addEventListener){  
  9.         node.addEventListener(type, fun, false);  
  10.     }else if(node.attachEvent){  
  11.         node[‘e‘ + type + fun] = fun;  
  12.         node[type + fun] = function(){node[‘e‘ + type + fun]();}  
  13.         node.attachEvent(‘on‘ + type, node[type + fun]);  
  14.     }  
  15. }  

5，在显示之前，我们需要有个addChild方法，如下
[javascript] view plain copy
 
  1. function addChild(DisplayObject){  
  2.     LGlobal.childList.push(DisplayObject);  
  3. }  

6，最后，在整个页面读取完成后，就可以把图片显示出来了
[javascript] view plain copy
 
  1. function init(speed,canvasname,width,height,func){  
  2.     LEvent.addEventListener(window,"load",function(){  
  3.         setInterval(function(){LGlobal.onShow();}, speed);  
  4.         LGlobal.setCanvas(canvasname,width,height);  
  5.         func();  
  6.     });  
  7. }  
  8. init(40,"back",300,300,main);  
  9. var loader;  
  10. function main(){  
  11.     loader = new LLoader();  
  12.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
  13.     loader.load("10594855.png","bitmapData");  
  14. }  
  15. function loadBitmapdata(event){  
  16.     var bitmapdata = new LBitmapData(loader.content);  
  17.     var bitmap = new LBitmap(bitmapdata);  
  18.     addChild(bitmap);  
  19. }  

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


联系
我们