html5如何点击一张图片弹出一段视频,用仿ActionScript的语法来编写html5——第一篇，显示一张图片...

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

}

第一篇完成，下一篇，实现Sprite类