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

第一篇，顯示一張圖片

一，代碼對(duì)比

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

};

二,編寫(xiě)js類(lèi)庫(kù)(暫命名為legend庫(kù))后的代碼

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)類(lèi),方便保存及訪問(wèn)公共的方法屬性,比如canvas等

var LGlobal = function (){}

LGlobal.type = "LGlobal";

我們始終都用到canvas,所以要把canvas保存起來(lái)，給LGlobal類(lèi)添加屬性和方法

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

}

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

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

LGlobal.onShow = function (){

if(LGlobal.canvas == null)return;

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

}

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

而所有可以顯示的對(duì)象，都有一個(gè)show方法，用來(lái)把自己畫(huà)到canvas上

LGlobal類(lèi)最后修改為

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è)類(lèi)，為了實(shí)現(xiàn)這兩個(gè)類(lèi)的功能，我們分別創(chuàng)建兩個(gè)類(lèi)LBitmapData和LBitmap

先來(lái)看LBitmapData類(lèi)，LBitmapData類(lèi)用來(lái)儲(chǔ)存圖片的數(shù)據(jù)等，我們把Image()儲(chǔ)存到LBitmapData類(lèi)里面

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類(lèi)，LBitmap類(lèi)用來(lái)顯示LBitmapData類(lèi)里儲(chǔ)存的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()的顯示，我們用到一開(kāi)始說(shuō)的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ì)說(shuō)明：http://html5.662p.com/thread-25-1-1.html

用仿ActionScript的語(yǔ)法來(lái)編寫(xiě)html5——第一篇，顯示一張圖片

第一篇,顯示一張圖片 一,代碼對(duì)比 as代碼: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

用仿ActionScript的語(yǔ)法來(lái)編寫(xiě)html5——第八篇，圖片處理+粒子效果

用仿ActionScript的語(yǔ)法來(lái)編寫(xiě)html5系列開(kāi)發(fā)到現(xiàn)在,應(yīng)該可以做出一些東西了,下面先來(lái)研究下圖片的各種效果預(yù)覽各種效果看下圖效果和代碼看這里,看不到效果的請(qǐng)下載支持html5的瀏覽器 ht ...

用仿ActionScript的語(yǔ)法來(lái)編寫(xiě)html5——終篇，LegendForHtml5Programming1.0開(kāi)源庫(kù)件

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

用仿ActionScript的語(yǔ)法來(lái)編寫(xiě)html5——第五篇，Graphics繪圖

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

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

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

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

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

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

//************************************************************************************* //**程序名稱(chēng):51單 ...

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

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

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

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

總結(jié)

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

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