我想使用 JavaScript 在 HTML5 画布上绘制一系列图像。我有以下 while 循环,我曾希望将所有图像绘制到画布上,但是,它目前只绘制第一个:
function drawLevelOneElements(){
/*First, clear the canvas */
context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
/*This line clears all of the elements that were previously drawn on the canvas. */
/*Then redraw the game elements */
drawGameElements();
/*Draw the elements needed for level 1 (26/04/2012) */
var fileName = 1;
var imagePositionX = 20;
var imagePositionY = 30;
while(fileName < 11){
/*Create an array of images here, move to next element of array on each iteration */
var numbers = new Array();
numbers[0] = "1.png"
numbers[1] = "2.png"
numbers[3] = "3.png"
numbers[4] = "4.png"
numbers[5] = "5.png"
image.src = fileName+".png";
image.src = numbers[0];
image.onload = function(){
context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
}
fileName = fileName+1;
imageY = imageY+20;
console.dir(fileName); /* displays in the console- helpful for debugging */
}
谈谈我希望这个函数能做什么:
将每个图像加载到数组的不同元素中(因此 1.png 将在 numbers[0] 中,2.png 在 numbers[1] 中,等等)
然后它将获取全局变量“image”,并将其源分配给 numbers[0] 的内容
然后在画布上的指定位置绘制该图像。
然后将变量 fileName 的值加 1,给它一个值 '2'
接下来,它将增加 Y 坐标的值,它将在画布上绘制图像 20-将要绘制的图像的位置向下移动 20 个像素
之后它会回到循环的开始并在画布上绘制下一个图像(2.png),位置比绘制的第一个图像的位置低 20 像素。
当变量“fileName”的值小于 11 时,它应该继续执行此操作,即它应该在最后一个绘制的图像下方绘制 10 个新图像。
但是,由于某种原因,我的函数只绘制了第一张图像。有人可以指出我做错了什么,我该如何纠正?
非常感谢。