睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

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

作者:睿美印象网站建设工作室  发布日期:2012-11-18
 最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇

第一篇,显示一张图片

一,代码对比

as代码:

AS Code复制内容到剪贴板
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代码:
 
JavaScript Code复制内容到剪贴板
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库)后的代码
 
JavaScript Code复制内容到剪贴板
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等
JavaScript Code复制内容到剪贴板
var LGlobal = function (){}  
LGlobal.type = "LGlobal";  

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

JavaScript Code复制内容到剪贴板
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类添加一个不停刷新的方法

JavaScript Code复制内容到剪贴板
LGlobal.onShow = function (){  
        if(LGlobal.canvas == null)return;  
        LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
}  
 
然后,我预想把所有现实的对象等都保存在一个数组里面,然后按照顺序显示
而所有可以显示的对象,都有一个show方法,用来把自己画到canvas上
LGlobal类最后修改为

JavaScript Code复制内容到剪贴板
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类里面

JavaScript Code复制内容到剪贴板
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()

JavaScript Code复制内容到剪贴板
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方法,实现如下
 
JavaScript Code复制内容到剪贴板
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类
 
JavaScript Code复制内容到剪贴板
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类是一个事件类,用来加载事件,点击等,这个以后再慢慢强化
 
JavaScript Code复制内容到剪贴板
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方法,如下
 
JavaScript Code复制内容到剪贴板
function addChild(DisplayObject){  
        LGlobal.childList.push(DisplayObject);  
}  
6,最后,在整个页面读取完成后,就可以把图片显示出来了
 
JavaScript Code复制内容到剪贴板
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类

 

转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美