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

Question

你好堆栈溢出社区，

我正在使用 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();
}

注释掉的drawTile()调用用于扭曲图像，使其看起来倾斜（但这不太相关）。 下面是 HTML 文件：

    <!DOCTYPE html>
<html>
    <head>
        <style>
body {
    background-color: #1ABC9C
}
        </style>
        <script src="main.js"></script>
    </head>

    <body>

      <!--  <button onclick="camtranslate(16,0);"> Right </button>
        <button onclick="camtranslate(-16,0);"> Left</button> <br>
        <button onclick="camtranslate(0,-16);"> Up </button>
        <button onclick="camtranslate(0,16);"> Down </button>
      -->

        <center>
            <h1>Akimbo</h1>
            <canvas id="canvas" height="600" width="600" style="border:1px solid #7F8C8D"></canvas>
        </center>
        <script>camtranslate(16, 0);</script>


    </body>
</html>

注释掉的按钮使图像在按下它们时出现，但是现在我已经将它们注释掉了，即使我调用了该函数，它也不起作用。 HTML 文件应该调用initialize()函数，但在我直接在控制台中调用该函数之前，画布中什么也没有出现。 我怎样才能让背景在页面加载后立即出现？

谢谢

Answer 1

加载和设置图像 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

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

问题描述

1 个解决方案

解决方案1
0 2015-10-24 15:00:45

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

问题描述

1 个解决方案

解决方案1 0 2015-10-24 15:00:45

解决方案1
0 2015-10-24 15:00:45