我在使用 Javacript 时遇到了一个小问题。我的脚本中有一组图像源，我想在用户输入时一个接一个地显示它们。
问题是，当我第一次单击“开始”按钮(document.getElementById("toStart")，我为其提供一个 EventListener)时， Canvas 上没有显示任何内容。但是，changeDisplay() 函数已被调用(日志在那里)。
然后我输入一个键，任意键，迭代器变量递增，我得到一个新的日志，这一次，球图像被显示。球图像是我的图片数组中索引 0 处的图像。当我输入某些内容时，它会一个接一个地显示所有图像，但它总是“一次性”，因为显示上一张图像而不是下一张图像。
这是我 trim 后的 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
这也正是我想要的，但是这一次，球图像打印在 Canvas 上，而不是 img1.jpg。
有什么想法吗？
谢谢!
最佳答案
我认为你应该在图像加载后绘制。尝试下面的代码。
imageTest.onload = function() {
ctx.drawImage(imageTest, 10 + (iterator + 1)*5, 10+(iterator+1)*5);
}
关于javascript - javascript 数组的第一张图像未显示在 Canvas 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51040142/