最近開始學(xué)習(xí)html5，因?yàn)橐恢倍际茄芯縜s，所以還是覺得as順眼一點(diǎn)，但是html5也不能不學(xué)，于是就想出了，可以把html5用as的語法來寫出來，做游戲應(yīng)該來的比較順手一些，下面開始第一篇

第一篇，顯示一張圖片

一，代碼對比

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);

}

三,實(shí)現(xiàn)

1,建一個(gè)靜態(tài)類,方便保存及訪問公共的方法屬性,比如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");

}

界面的顯示，為了能夠動態(tài)顯示，選擇不停的刷新canvas

給LGlobal類添加一個(gè)不停刷新的方法

LGlobal.onShow = function (){

if(LGlobal.canvas == null)return;

LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);

}

然后，我預(yù)想把所有現(xiàn)實(shí)的對象等都保存在一個(gè)數(shù)組里面，然后按照順序顯示

而所有可以顯示的對象，都有一個(gè)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兩個(gè)類，為了實(shí)現(xiàn)這兩個(gè)類的功能，我們分別創(chuàng)建兩個(gè)類LBitmapData和LBitmap

先來看LBitmapData類，LBitmapData類用來儲存圖片的數(shù)據(jù)等，我們把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;

}

}

關(guān)于Image()的顯示，我們用到一開始說的show方法，實(shí)現(xiàn)如下

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);

}

}

詳細(xì)說明：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系列開發(fā)到現(xiàn)在,應(yīng)該可以做出一些東西了,下面先來研究下圖片的各種效果預(yù)覽各種效果看下圖效果和代碼看這里,看不到效果的請下載支持html5的瀏覽器 ht ...

用仿ActionScript的語法來編寫html5——終篇，LegendForHtml5Programming1.0開源庫件

一,LegendForHtml5Programming1.0庫件是什么?它是一個(gè)javascript庫,它模仿了ActionScript的語法,用于html5的開發(fā),目前實(shí)現(xiàn)的功能相對較少,還不能稱之 ...

用仿ActionScript的語法來編寫html5——第五篇，Graphics繪圖

用仿ActionScript的語法來編寫html5——第五篇,Graphics繪圖 canvas本身就是一個(gè)Graphics,可以直接進(jìn)行繪圖在actionscript里面,每個(gè)Sprite都有一個(gè)G ...

ABAP的語法高亮是如何在瀏覽器里顯示的

這篇文章的原文我發(fā)表在SAP官方社區(qū)上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...

HTML5中與頁面顯示相關(guān)的API

1.HTML5中與頁面顯示相關(guān)的API 在HTML5中,增加了幾個(gè)與頁面顯示相關(guān)的API,其中一個(gè)是Page?Visibility?API Page?Visibility?API??是指當(dāng)頁面變?yōu)樽钚?...

51單片機(jī)實(shí)現(xiàn)對24C02進(jìn)行頁寫、順序讀取并顯示驗(yàn)證

//************************************************************************************* //**程序名稱:51單 ...

在iPhone手機(jī)上寫了input type="date" 顯示不出來的原因

在iPhone手機(jī)上寫了input type="date" 顯示不出來的原因 今天在手機(jī)頁面上使用新的input類型,這樣子寫,在chrome瀏覽器上瀏覽,很好,顯示出來.然后用i ...

如何寫javascript代碼隱藏和顯示這個(gè)div

如何寫javascript代碼隱藏和顯示這個(gè)div 瀏覽次數(shù):82次懸賞分:10 | 解決時(shí)間:2011-4-21 14:41 | 提問者:hade_girl

總結(jié)

以上是生活随笔為你收集整理的html5语法参考图片,仿AS语法来写HTML5—第1章，显示一张图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。