html5语法参考图片,仿AS语法来写HTML5—第1章，显示一张图片

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

}

}

详细说明：http://html5.662p.com/thread-25-1-1.html

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

第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

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

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

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

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

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

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

ABAP的语法高亮是如何在浏览器里显示的

这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...

HTML5中与页面显示相关的API

1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

51单片机实现对24C02进行页写、顺序读取并显示验证

//************************************************************************************* //**程序名称:51单 ...

在iPhone手机上写了input type="date" 显示不出来的原因

在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

如何写javascript代码隐藏和显示这个div

如何写javascript代码隐藏和显示这个div 浏览次数:82次悬赏分:10 | 解决时间:2011-4-21 14:41 | 提问者:hade_girl