HTML5技术

仿AS语法来写HTML5—第1章，显示一张图片

字号+ 作者：lufy 来源： 2014-11-16 21:26 我要评论( )

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

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

第一篇，显示一张图片

一，代码对比

as代码：

AS Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  1. var LGlobal = function (){}  
  2. LGlobal.type = "LGlobal";  


我们始终都用到canvas,所以要把canvas保存起来，给LGlobal类添加属性和方法

JavaScript Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  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 Code复制内容到剪贴板
  1. function addChild(DisplayObject){  
  2.         LGlobal.childList.push(DisplayObject);  
  3. }  
6，最后，在整个页面读取完成后，就可以把图片显示出来了
 
JavaScript Code复制内容到剪贴板
  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. }  

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

 

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5-终篇LegendForHtml5Programming

    仿AS语法来写HTML5-终篇LegendForHtml5Programming

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第9章，URLLoader读取文件

    仿AS语法来写HTML5—第9章，URLLoader读取文件

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章，图片处理+粒子

    仿AS语法来写HTML5—第8章，图片处理+粒子

    2014-11-16 21:26

网友点评
精彩导读
Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

Dora.Interception: 一个为.NET Core度身定制

用Visual Studio2017写C++静态库 - jily16

用Visual Studio2017写C++静态库 - jily16

vue全局配置----小白基础篇 - 星光笔

vue全局配置----小白基础篇 - 星光笔

这短短几行代码价值一万 - 小尧弟

这短短几行代码价值一万 - 小尧弟

HTML5优势 - 计划

HTML5优势 - 计划

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习