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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用仿ActionScript的语法来编写html5——第一篇，显示一张图片，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6183字，纯文字阅读大概需要9分钟。

内容图文

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

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

以上就是用仿ActionScript的语法来编写html5——第一篇，显示一张图片的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的用仿ActionScript的语法来编写html5——第一篇，显示一张图片全部内容，希望文章能够帮你解决用仿ActionScript的语法来编写html5——第一篇，显示一张图片所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/388995.html

来源：【匿名】

【上一篇】三个不常见的HTML5实用新特性简介【下一篇】html5如何获取php数据

更多 ►

【用仿ActionScript的语法来编写html5——第一篇，显示一张图片】教程文章相关的互联网学习教程文章

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

第三篇，鼠标事件与游戏人物移动一，假设假设，所有可添加鼠标事件的对象，都有一个mouseEvent方法，添加的鼠标事件同过这个mouseEvent来调用。这样的话，添加鼠标事件，其实只需要给canvas添加一个鼠标事件，然后循环LGlobal类里的childList，即循环所有的可视对象，如果被添加了鼠标事件，那么就调用它相应的方法。二，实现1，给LGlobal类追加mouseEvent方法，然后修改LGlobal类的setCanvas，实现canvas的鼠标事件的添加与调用LG...

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

上一篇，我已经模仿as，加入了LBitmap和LBitmapData类，并且用它们实现了静态图片的显示。这次用Sprite来动态显示图片。依然遵循上一篇对显示对象的处理的思路，添加LSprite类，并追加show方法，如下：function LSprite(){ var self = this; self.type = "LSprite"; self.x = 0; self.y = 0; self.visible=true; self.childList = new Array() } LSprite.prototype = { show:function (cood){ if(cood==null)cood={x:0...

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

这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度var backLayer; //地图 var mapimg; //人物 var playerimg; var loader var imageArray; var loadIndex = 0; var imgData = new Array({name:"back.jpg",img:null},{name:"1.png",img:null},{name:"2.png",img:null}); var chara; var charaList; function main(){ loadImage(); } function loadImage(){ if(loadIndex >= ...

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

canvas本身就是一个Graphics，可以直接进行绘图在actionscript里面，每个Sprite都有一个Graphics，Shape我先不考虑了，它更容易实现些，在Html5中，绘图都是绘在同一个canvas上面的，所以我们现在需要考虑两个问题，1，如何把每个Sprite里的Graphics在不同的时刻，画在同一个地方2，因为我们现在在不停的刷新页面，所以如果我们用Graphics绘图，那么它也需要不断的刷新那我现在依然先假设，每一个Sprite储存的Graphics，只保存一些...

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

用仿ActionScript的语法来编写html5——第六篇，TextField与输入框一，对比1,html5中首先看看在html5的canvas中的文字显示var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = "40pt Calibri"; context.fillStyle = "#0000ff"; context.fillText("文字测试!", 50, 150);在html中输入框就不用说了，需要用到input标签<input type="text" id="myTextbox" />2,在...

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

第七篇，自定义按钮这次弄个简单点的，自定义按钮。其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。下面是添加按钮的代码，function gameInit(event){ backLayer = new LSprite(); addChild(backLayer); btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"]))); btn01.x = 76; btn01.y = 50; backLayer.addChild(...

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

第八篇，图片处理+粒子效果用仿ActionScript的语法来编写html5系列开发到现在，应该可以做出一些东西了，下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器http://fsanguo.comoj.com/html5/jstoas07/index.htmllufylegend.js引擎的下载链接http://lufylegend.com/lufylegend因为引擎封装后，对于之前的代码做了一部分调整，删去了一些属性，下面是我用新版引擎开发的同样的粒子...

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

第九篇，仿URLLoader读取文件先看看最后的代码function readFile(){ urlloader = new LURLLoader(); urlloader.addEventListener(LEvent.COMPLETE,readFileOk); urlloader.load("../file/test.txt","text"); } function readFileOk(){ mytxt.text = urlloader.data; }基本上已经实现了Actionscript的模仿了。效果和代码看这里,看不到效果的请下载支持HTML5的浏览器http://fsanguo.comoj.com/html5/jstoas09/index.html 下面说说实现...

用仿ActionScript的语法来编写html5——终篇

一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库，它模仿了ActionScript的语法，用于html5的开发，目前实现的功能相对较少，还不能称之为引擎，希望将来可以作为html5的开源引擎，为html5开发者提供服务。二，LegendForHtml5Programming1.0库件的构建过程请参照下面的九篇文章，最终代码和构建过程会有些出入，以源码为准。用仿ActionScript的语法来编写html5系列文章第一篇，显示一张图片http://blog.csdn.net/l...