第一篇,显示一张图片

一,代码对比

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——第一篇,显示一张图片的更多相关文章

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

    一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...

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

    第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...

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

    上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并 ...

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

    用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...

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

    用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...

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

    一,对比1,html5中首先看看在html5的canvas中的文字显示 var canvas = document.getElementById("myCanvas"); var ...

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

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

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

    第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...

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

    第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...

随机推荐

  1. 用Netty开发中间件:高并发性能优化(转)

    用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...

  2. 我为什么喜欢Go语言123123

    从2000年至今,也写了11年代码了,期间用过VB.Delphi.C#.C++.Ruby.Python,一直在寻找一门符合自己心意和理念的语言.我很在意写代码时的手感和执行的效率,所以在Go出现之前一 ...

  3. java开发总体知识复习

    上一篇发了一个找工作的面经, 找工作不宜, 希望这一篇的内容能够帮助到大家. 对于这次跳槽找工作, 我准备了挺长的时间, 其中也收集了很多比较好的笔试面试题, 大都是一些常用的基础, 很多都是由于时间 ...

  4. php -- 魔术方法 之 判断属性是否存在或为空:__isset()

    属性重载:当访问一个不存在或者权限不够的属性的时候,能够触发一系列的魔术方法,就叫做属性重载 __isset($name):当使用 isset()函数或者empty()函数 判断属性是否存在或者是否为 ...

  5. mysql 分页sql

    -- pageSize=3 pageIndex total=7 -- 开始行号 startRowNum=(pageIndex-1)*pageSize+1; -- 结束行号 endRowNum=page ...

  6. 一些 JS页面的 调用方式init()

    //初始化.... var initAccManPage=function() { //初始化... var initChangeBtn = function(){ $("#btnChang ...

  7. 配置使用TargetFrameworks输出多版本类库

    1.类库右键 2.修改配置 修改前: <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <Targe ...

  8. 《SQL Server 2000设计与T-SQL编程》

    <SQL Server 2000设计与T-SQL编程> <SQL Server 2000设计与T-SQL编程>笔记1 http://dukedingding.blog.sohu ...

  9. 状态栏,ActionBar,工具栏高度调整

    1.在属性中可以这样设置更改ActionBar的高度android:layout_marginTop="?android:attr/actionBarSize" Rect fram ...

  10. MVC模式 与 Model2模型 介绍

    Model1回顾 MVC模式:MVC(Model.View.Controller)是软件开发过程中比较流行的设计思想.旨在分离模型.控制.师徒.是一种分层思想的体现. Model2简介Java Web ...