最近开始学习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,最后,在整个页面读取完成后,就可以把图片显示出来了
- 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);
- }