ActionScript와 유사한 구문을 사용하여 html5 작성 - 첫 번째 기사, 그림 표시

최근에 HTML5를 배우기 시작했어요. 계속 as를 공부했기 때문에 아직은 as가 보기에 더 좋다고 생각하는데, html5를 배워야 해서 as의 구문을 사용하여 html5를 작성할 수 있다는 것을 알아냈습니다. 게임을 만들 때 더 좋습니다

. 그림 표시

코드로

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

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

3.

1 구현, 정적 클래스 빌드, 편리한 캔버스 등의 공용 메소드 속성을 저장하고 액세스합니다.

var LGlobal = function (){}  
LGlobal.type = "LGlobal";

우리는 항상 캔버스를 사용하므로 캔버스를 저장하고 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");  
}

인터페이스 동적으로 표시하려면 캔버스를 지속적으로 새로 고치도록 선택하세요

LGlobal 클래스에 연속 새로 고침 방법 추가

LGlobal.onShow = function (){  
    if(LGlobal.canvas == null)return;  
    LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
}

그런 다음 모든 실제 개체를 배열에 저장하는 것을 상상합니다. 그 다음

을 순서대로 표시합니다.

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로 수정되었습니다. BitmapData 및 Bitmap 클래스는 표시에 사용됩니다. 이 두 클래스의 기능을 구현하기 위해 각각 LBitmapData 및 LBitmap이라는 두 클래스를 만듭니다.

먼저 LBitmapData 클래스를 살펴보겠습니다. 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();  
    }  
}

에 Image()를 저장합니다. LBitmap 클래스를 보면 LBitmap 클래스는 LBitmapData 클래스

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()를 표시하는 데 사용됩니다. 🎜>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. 마지막으로 자체 LLoader가 없습니다. class

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.php.cn)를 참고해주세요!