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

原创 2011年09月06日 13:15:04

最近开始学习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);
}


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

用仿ActionScript的语法来编写html5——第七篇,自定义按钮

第七篇,自定义按钮 这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码, function gameI...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:41
  • 5165

用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEv...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月26日 21:39
  • 4998

用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。 这次用Sprite来动态显示图片。 依然遵循上一篇对显示对象的处理的思路,添加LSprit...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月08日 16:25
  • 10090

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

第四篇,继承与简单的rpg 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article/d...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 17:36
  • 5075

用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

第八篇,图片处理+粒子效果用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:45
  • 6808

flex---->ActionScript 3.0基本语法

测试输出: trace(123); trace("abc");  变量与常量: var a:int, b:int, c:int; a = b = c = 6; trace(a, b, c); ...
  • ncepustrong
  • ncepustrong
  • 2012年08月27日 20:19
  • 1174

用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

用仿ActionScript的语法来编写html5——第六篇,TextField与输入框 一,对比 1,html5中 首先看看在html5的canvas中的文字显示 var canva...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月16日 15:28
  • 7155

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

第三篇,鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 11:34
  • 7618

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...
  • lufy_Legend
  • lufy_Legend
  • 2011年10月05日 11:21
  • 13338

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.cs...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月15日 12:44
  • 7234
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第一篇,显示一张图片
举报原因:
原因补充:

(最多只允许输入30个字)