爲什麼JavaScript不在畫布上繪製圖像？

我在繪製圖像到畫布時遇到問題。沒有錯誤，但仍然沒有繪製圖像。請查看的代碼塊，看看你能看到什麼我不能：爲什麼JavaScript不在畫布上繪製圖像？

function loadPacman(posX, posY) { 
    this.posX = posX; 
    this.posY = posY; 
    pacman = new Image(); 
    pacman.src="http://www.frogbug.se/pacman/img/naziman.png"; 
    pacman.addEventListener("load", function(){ 
      canvas.drawImage(pacman, this.posX, this.posY) 
     }, false); 
} 

function loadGhost(posX, posY) { 
    this.posX = posX; 
    this.posY = posY; 
    ghost = new Image(); 
    ghost.src="http://www.frogbug.se/pacman/img/ghost.png"; 
    ghost.addEventListener("load", function(){ 
      canvas.drawImage(ghost, this.posX, this.posY) 
     }, false); 
}

這是我的函數加載頁面加載時：

function onLoad() { 
    var xy = document.getElementById('canvas'); 
    canvas = xy.getContext('2d'); 
    //calculate the x and y for canvas 
    x = xy.width; 
    y = xy.height; 

    //divide the width and length of the canvas to get small cubes 
    //which is 40x40 
    xtile = Math.floor(x/40); 
    ytile = Math.floor(y/40); 

    //draw lines around the canvas 
    canvas.strokeRect(0, 0, x, y); 

    //the array for the map 
    var map = getMapArray(); 

    //draw the map 
    drawMap(map); 
    //fillCanvas("0010", 0, 40, 40, 40); 

    //load the ghost and pacman 
    loadPacman(0, 0); 
    loadGhost((xtile*40)-40, (ytile*40)-40); 
}

提前感謝！您可以查看這裏的全部源等： http://www.picturds.com/pacman_serious/

來源

2012-01-12 Ms01

順便說一句，我知道我的代碼是有點草率，但後來我將它清理乾淨。 :) – Ms01 2012-01-12 04:54:22

您可能會在理解「this'如何工作時遇到一些問題。快速閱讀：http://www.quirksmode.org/js/this.html – 2012-01-12 05:09:02

從this.posX和this.posY負載回調刪除this。在這種情況下，this是圖像元素，而不是this與分配給this.posX（即window）時相同。

http://jsfiddle.net/5dkx4/

來源

2012-01-12 05:06:56 bennedich

謝謝，你救了我:) – Ms01 2012-01-12 05:11:01

爲什麼JavaScript不在畫布上繪製圖像？

回答

相關問題