首页前端开发HTML用仿ActionScript的语法来编写html5――第一篇，显示一张图片

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

时间2024-01-26 11:16:02发布访客分类HTML浏览559
导读：收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第一篇，显示一张图片，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，...
收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第一篇，显示一张图片，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

 

最近开始学习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小屋

 

最近开始学习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小屋

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

ArraydivHTMLhtml5letMappost-format-gallerythis数组

若转载请注明出处： 用仿ActionScript的语法来编写html5――第一篇，显示一张图片
本文地址： https://pptw.com/jishu/586688.html
用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画 HTML4与HTML5之间的10个本质区别

游客 回复需填写必要信息
↑