javascript数组的第一个图像未显示在画布上

Question

我在使用Javacript时遇到了一个小问题。 我的脚本中有一个图像源数组，我想在用户输入时一个接一个地显示。

问题是，当我第一次单击“开始”按钮（我为其提供EventListener的document.getElementById（“ toStart”））时，画布上没有任何显示。 但是，changeDisplay（）函数已被调用（日志已存在）。

然后，输入一个键，任意键，并且迭代器变量递增，得到一个新的日志，这一次，球图像被显示。 球图像是我的图片数组中索引0处的图像。 当我输入一些东西时，它将一个接一个地显示所有图像，但是它总是“一个关闭”，因为在上一个图像而不是下一个图像中显示了图像。

这是我修剪的test.js脚本：

//canvas
var canvas = document.getElementById("test_canvas");
var ctx = canvas.getContext("2d");

//gameloop
var gameHasStarted = false;

//Current question number
var iterator = 0;

//The timer for the changeQuestion method
var t2;

//interval between questions
var intervalBetweenQuestions = 3000;

//Images to display
var pics = ['../images/uploads/ball.png', '../images/uploads/img1.jpg', '../images/uploads/img2.jpg', '../images/uploads/img3.jpg'];

//reference to the image slot in the Twig template
var imageTest = document.getElementById('imageTest');


window.onload = function() {

    document.addEventListener('keydown', function(event) {
        //    alert('keydown');
        if(gameHasStarted) {
            checkKeyPressed(event);
        }

    }, false);

};

document.getElementById("toStart").addEventListener('click', function(event) {

    changeDisplay();

    //every X seconds, here 3 -- If the user doesn't input anything, this switchs the questions when the X seconds are up
    t2 = setInterval(changeQuestion, intervalBetweenQuestions);

    gameHasStarted = true;
});


function changeQuestion() {


    if(gameHasStarted){

        if(iterator < pics.length) {

            if(answers[iterator] == null) {
                //No answer has been given
                answers[iterator] = -1;
                alert("no answer given");
            }

            iterator++;

            //cleans the interval for the new questions
            clearInterval(t2);
            t2 = setInterval(changeQuestion, intervalBetweenQuestions);


            changeDisplay();

        } else {
            alert("Finished the test (you timed out at the end)!");
            //redirect at the end
           // window.location.href = Routing.generate('homepage');
        }

    }
}

function checkKeyPressed(e){
    //the key pressed by the user
    var keynum;

    if(window.event) { // IE
        keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera
        keynum = e.which;
    }

    if(keynum < 48 || keynum > 90) {
        /** Ignores F5 for example**/
    } else {

        if(iterator < pics.length) {

            //gets the input of the player recorded
            answers[iterator] = keynum;
            changeQuestion();

        } else {
            alert("Finished the test !");
            window.location.href = Routing.generate('homepage');

        }
    }
}


function changeDisplay() {

    //Clears the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //sets the image's source to the one of the current question
    imageTest.src = pics[iterator];

    //Debug
    console.log("Iterator : " + iterator + " and image  " + imageTest.src);

    //Draws the image -- excuse the weird coordinates
    ctx.drawImage(imageTest, 10 + (iterator + 1)*5, 10+(iterator+1)*5);

    return true;
}

还有我的Twig模板：

{% block  body %}


    <div class="row">
        <div class="offset-md-3"></div>
        <p id="labelTest">Here</p>
    </div>
    <div class="row">
    <div class="offset-md-3"></div>
        <canvas id="test_canvas" width="760" height="520"></canvas>
    </div>
    <div class="row offset-md-3">

        <button id="toStart">Start</button>

    </div>
    <div style="display:none;">
        <img id="imageTest" src="#"
             width="300" height="227">
    </div>

{% endblock %}

{% block javascripts %}

    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>

    <script src="{{ asset('js/test.js') }}"></script>

{% endblock %}

第一个调试日志，当我第一次按下“开始”按钮并调用changeDisplay（）方法时，它是

Iterator : 0 and image  http://localhost:8000/images/uploads/ball.png test.js:54:5

这正是我想要的，但没有图像显示。

然后，当我按一些东西并再次调用changeDisplay（）时，消息变为：

Iterator : 1 and image  http://localhost:8000/images/uploads/img1.jpg test.js:54:5

这也正是我想要的，但是这次，球图像被打印在画布上，而不是img1.jpg。

有任何想法吗 ？

谢谢 ！

Answer 1

我认为您应该在图像加载后进行绘制。 尝试下面的代码。

imageTest.onload = function() {

  ctx.drawImage(imageTest, 10 + (iterator + 1)*5, 10+(iterator+1)*5);

}