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
總結
以上是生活随笔為你收集整理的html5语法参考图片,仿AS语法来写HTML5—第1章，显示一张图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML文档包应含几个基本标记,HTML
- 下一篇： html5块元素怎么理解,HTML5-块