JavaScript初始函数未在画布上绘制

你好，stack溢出社区

我正在用JavaScript开发一个图形引擎，目前正在尝试重复一个图像，将其用作背景。奇怪的是，

initalize（）

函数直到在浏览器控制台中直接调用后才被调用。在这之前，我有一些按钮来移动我现在试图用作背景的图像。即使这样，图像也只有在按下其中一个按钮后才会出现。（旧代码被注释掉）。下面是JavaScript：

var ctx;
var cam_x = 0,cam_y = 0;
//End of Global Variables
function initialize(){
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);//RESETS
    var img=new Image();
    img.src = "brick.png";
    var i;
    var j;
    for(i = 0; i < 10; i++){
      for(j = 0; j < 10; j++){
        drawTile(img, i, j, 0);
      }
    }
    console.log("should be drawing");

    // drawTile(img, 0,0,0);
    // drawTile(img, 1,0,0);
    // drawTile(img, 2,0,0);
    // drawTile(img, 1,1,0);
    // drawTile(img, 2,2,0);
    // console.log("should be drawing");

}

function setTransformations(){
    ctx.translate(-cam_x,-cam_y);
}

function drawTile(img,x,y,z){
    ctx.setTransform(1,0,-1,1,0,z);
    setTransformations();
    ctx.drawImage(img,x*32,y*32);
    ctx.setTransform(1,0,0,1,0,0);
}

function camtranslate(x,y){
    cam_x += x;
    cam_y += y;
    initialize();
}

注释掉的按钮使图像在按下按钮时显示，但现在我已经注释掉了它们，即使我调用了该函数，它也不起作用。HTML文件应该调用

initialize（）

函数，但是在控制台中直接调用函数之前，画布中不会显示任何内容。如何使页面加载时背景立即出现

---

谢谢

加载需要时间，设置图像src属性并不意味着图像可以使用

您需要使用image.onload事件来标记映像已加载，并调用使用该映像的函数

function drawTiles(){ // create the function to draw the tiles
    var i;
    var j;
    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){
            drawTile(img, i, j, 0);
        }
    }
}
var img=new Image();  // create image
img.src = "brick.png";  // set the URL and it will start to load it
img.onload = drawTiles;  // the image will call your function when it has loaded

function drawTiles（）{//创建用于绘制平铺的函数
var i；
var j；
对于（i=0；i<10；i++）{
对于（j=0；j<10；j++）{
牵引瓦（img，i，j，0）；
}
}
}
var img=新图像（）；//创造形象
img.src=“brick.png”；//设置URL，它将开始加载它
img.onload=drawTiles；//图像加载后将调用您的函数

您在HTML代码中调用

initialize（）

的位置？可能重复@Griffith我调用

camtranslate（）

函数，该函数调用

initialize（）

函数。@kaido不，我没有收到像前面提到的其他帖子那样的任何安全错误。在控制台中直接调用它之前，它不会画图。“其他帖子”不仅仅是关于安全错误的，请再次阅读它，并给出它的答案。正如Blindman67和dupe中的我/社区所回答的那样，您的问题是，您不必等到图像加载后再尝试绘制它。在图像的

onload

事件中添加绘图零件。

function drawTiles(){ // create the function to draw the tiles
    var i;
    var j;
    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){
            drawTile(img, i, j, 0);
        }
    }
}
var img=new Image();  // create image
img.src = "brick.png";  // set the URL and it will start to load it
img.onload = drawTiles;  // the image will call your function when it has loaded