[英]Why doesn't javascript draw the images on the canvas?
将图像绘制到画布上时遇到问题。 没有错误,但仍然没有绘制图像。 请查看代码块,看看你能不能看到我不能:
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/
从加载回调中的this.posX
和this.posY
中删除this
。 this
在这种情况下是图像元素,不一样this
,当分配给作为this.posX
(这是window
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.