用仿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,最后,在整个页面读取完成后,就可以把图片显示出来了
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类

已标记关键词 清除标记
相关推荐
<p> <span style="color:#337FE5;"><strong>【为什么还需要学习C++?】</strong></span> </p> <p style="margin-left:0cm;"> 你是否接触很多语言,但从来没有了解过编程语言的本质? </p> <p style="margin-left:0cm;text-align:start;"> 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? </p> <p style="margin-left:0cm;text-align:start;"> 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹? </p> <p style="margin-left:0cm;text-align:start;">   </p> <p style="margin-left:0cm;text-align:start;"> 那么C++就是你个人能力提升,职业之路进阶的不二之选。 </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p style="margin-left:0cm;"> <strong><span style="color:#337FE5;">【课程特色】</span></strong> </p> <p style="margin-left:0cm;text-align:start;"> 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 </p> <p style="margin-left:0cm;text-align:start;"> 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 </p> <p style="margin-left:0cm;text-align:start;"> 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p class="ql-long-24357476"> <span style="color:#337FE5;"><strong>【学完后我将达到什么水平?】</strong></span> </p> <p class="ql-long-24357476"> 1.对C++的各个知识能够熟练配置、开发、部署; </p> <p class="ql-long-24357476"> 2.吊打一切关于C++的笔试面试题; </p> <p class="ql-long-24357476"> 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 </p> <p class="MsoNoSpacing" style="margin-left:18pt;"> <br /> </p> <div> <br /> </div> <p> <br /> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#337FE5;"><strong>【面向人群】</strong></span> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#222226;font-family:PingFangSC-Regular, "font-size:14px;background-color:#FFFFFF;">1.希望一站式快速入门的C++初学者;</span> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#222226;font-family:PingFangSC-Regular, "font-size:14px;background-color:#FFFFFF;">2.希望快速学习 C++、掌握编程要义、修炼内功的开发者;</span> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#222226;font-family:PingFangSC-Regular, "font-size:14px;background-color:#FFFFFF;">3.有志于挑战更高级的开发项目,成为资深开发的工程师。</span> </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p> <br /> </p> <p> <span style="color:#337FE5;"><strong>【课程设计】</strong></span> </p> <p> 本课程包含3大模块 </p> <p> <strong>基础篇</strong><br /> 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 </p> <p> <br /> <strong>进阶篇</strong><br /> 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 </p> <p> <br /> <strong>提升篇:</strong><br /> 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。 </p> <p> <img src="https://img-bss.csdnimg.cn/202007091130239667.png" alt="" /> </p>
百度云盘分享 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例…… ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除…… Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)并发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,并发送给李四,张三用自己的私钥解密从李四处收到的信息…… Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Jav
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页