[ 登录注册 ]

HTML5

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

2016-08-17 14:11:24 admin 返回上一页

 

最近开始学习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['e' + type + fun] = fun; 

        node[type + fun] = function(){node['e' + type + fun]();} 

        node.attachEvent('on' + type, node[type + fun]); 

    } 

 

5,在显示之前,我们需要有个addChild方法,如下

 

function addChild(DisplayObject){ 

    LGlobal.childList.push(DisplayObject); 

 

6,最后,在整个页面读取完成后,就可以把图片显示出来了

www.2cto.com

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类

摘自 lufy小屋

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377717.html
返回上一页    返回分类 上一篇:   下一篇:
相关