Почему-то не срабатывает функция plate. И еще вопрос: почему если i++ и plate(); поменять местами, то на этом сценарий зависает? Не сердитесь пожалуйста, я совсем нубас... только начал изучать js. заранее благодарен за ответ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>banner 240x400 - canvas</title>
<script src="modernizr.custom.65354.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp () {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
context.drawImage(bg, 0, 0);
context.strokeStyle = "#cacaca";
context.lineWidth = 1;
context.strokeRect(0.5, 0.5, 239, 399);
context.fillStyle = "#FF0000";
context.font = "12px";
context.fillText ("frame = " + i, 5, 15);
if(i == 100){
plateStatus = true;
plateFadeIn = true;
}
i++;
}
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen();
}
function plate(){
context.globalAlpha = 1;
context.fillStyle = "#000000";
context.fillRect(0,0, 240, 400);
if(plateStatus == true){
if(plateFadeIn == true){
if(plateAlpha < 1){
context.globalAlpha = plateAlpha;
context.drawImage(plate, plateX, plateY);
plateAlpha = plateAlpha + 0.01;
}else{
plateAlpha = 1;
plateFadeIn = false;
plateStatus = false;
context.globalAlpha = plateAlpha;
context.drawImage(plate, plateX, plateY);
context.globalAlpha = 1;
}
}
}
}
var bg = new Image();
bg.src = "img/bg.jpg";
var plate = new Image();
plate.src = "img/plate.png";
plateX = 0;
plateY = 200;
plateScale = 0.5;
plateAlpha = 0;
plateStatus = false;
plateFadeIn = false;
plateFadeOut = false;
var i = 0;
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="240" height="400">
Your browser doesn't support canvas.
</canvas>
</div>
</body>
</html>