[英]Why doesn't javascript draw the images on the canvas?
I have a problem with drawing images to my canvas. 将图像绘制到画布上时遇到问题。 There is no error but still there is no images drawn.
没有错误,但仍然没有绘制图像。 Please review the chunk of code and see if you can see what I cannot:
请查看代码块,看看你能不能看到我不能:
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);
}
And this is my function that loads when the page loads: 这是我在页面加载时加载的函数:
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);
}
Thanks in advance! 提前致谢! You can view the full source and so on here: http://www.picturds.com/pacman_serious/
您可以在此处查看完整资源等内容: http : //www.picturds.com/pacman_serious/
Remove this
from this.posX
and this.posY
in the load callback. 从加载回调中的
this.posX
和this.posY
中删除this
。 this
in that context is the image element, not the same this
as when you assign to this.posX
(which is window
). this
在这种情况下是图像元素,不一样this
,当分配给作为this.posX
(这是window
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.