我有以下 JS 文件，其中包含一个函数，用于绘制我使用 HTML5 画布和 JavaScript 编写的基于浏览器的游戏的第一级所需的元素：
* This function draws the elements for level 1. */
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();
/*Create the four description areas, and place them near the bottom of the canvas */
/*Create boxes with rounded corners for the description areas */
CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
if(typeof stroke == "undefined" ){
stroke = true;
}
if(typeof radius === "undefined"){
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if(stroke){
context.stroke();
}
}
context.drawDescriptionArea(70, 400, 120, 70);
context.font = '25pt Calibri';
context.strokeText('Asset', 90, 440);
context.drawDescriptionArea(300, 400, 120, 70);
context.strokeText('Liability', 310, 440);
context.drawDescriptionArea(540, 400, 120, 70);
context.strokeText('Income', 550, 440);
context.drawDescriptionArea(750, 400, 180, 70);
context.strokeText('Expenditure', 760, 440);
/*Now draw the images to the canvas */
/*First, create variables for the x & y coordinates of the image that will be drawn.
the x & y coordinates should hold random numbers, so that the images will be
drawn in random locations on the canvas.*/
var imageX = Math.floor(Math.random()*100);
var imageY = Math.floor(Math.random()*100);
/*Draw all images from assetsImageArray */
/*Use a while loop to loop through the array, get each item and draw it. */
var arrayIteration = 0;
while(arrayIteration < assetsImageArray.length){
context.drawImage(assetsImageArray[arrayIteration], imageX, imageY, 50, 50);
arrayIteration+1;
}
}
目前，当我在浏览器中加载我的网页时，会显示画布以及画布上的开始按钮。单击开始按钮时，将调用上述函数。
但是，由于某种原因，执行此功能需要很长时间：当我单击按钮时，浏览器在几秒钟内根本没有做任何事情，然后它就像没有响应一样“淡出”，然后任务实际执行，函数中的元素被绘制到画布上。
我还收到有关无响应脚本的警告消息，让我可以选择继续、调试脚本或停止脚本。当我选择停止脚本时，被调用的函数被执行，所有元素都被绘制到画布上。
我想知道如何阻止显示此警告消息，并获得将元素更快地绘制到画布的功能。
我的第一个想法是它可能与此函数末尾的 while 循环有关，或者可能与我用来保存将要绘制的图像的数组有关？
At the moment, the array only holds one image- eventually I want to have three or four separate arrays that will hold a total of about 40 images between them, all of which will be drawn to the canvas using this function, but I don't think I can start adding more images to this array until I've managed to cut the loading speed by a hefty amount.
Does anyone know if what I'm doing is correct? Or if not, how I should go about it?
One thing I'm not sure about is how JavaScript determines its array sizes- are they fixed or dynamic? How would I print out the size of this array in the console to check?
I haven't specified an array size because I need it to be dynamic, as the number of images that will need to be loaded to the canvas must be changeable. Can anyone help?