Форум

rolleyes · #1 (**permalink**) 06.01.2015, 18:08

Почему-то не срабатывает функция 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>

Safort · #2 (**permalink**) 06.01.2015, 18:22

Посмотри на строки 62 и 90. Ты объявляешь функцию, а потом перезаписываешь её как объект класса Image.
И ещё, всегда объявляй переменные с помощью var, иначе постоянно подобные ошибки будут.

rolleyes · #3 (**permalink**) 06.01.2015, 19:24

Сообщение от Safort

Посмотри на строки 62 и 90. Ты объявляешь функцию, а потом перезаписываешь её как объект класса Image.
И ещё, всегда объявляй переменные с помощью var, иначе постоянно подобные ошибки будут.

Оооо... Точно, спасибо!

rolleyes · #4 (**permalink**) 06.01.2015, 22:17

Safort, можно еще попросить вас ответить на один вопрос? В строках 35-37 я назначаю свойства тексту, в строках 82-84 по идее переназначаю, чтобы написать сообщение в другом стиле, но все стили и по цвету и по размеру шрифта наследуются из первого назначения... Почему?(

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>123</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++;		

		plateFn();
		
		 		
        }
	

        function gameLoop() {
            window.setTimeout(gameLoop, 20);
            drawScreen();
        }




	function plateFn(){

		if(plateStatus == true){
			if(plateFadeIn == true){
				if(plateAlpha < 1){
					context.globalAlpha = plateAlpha;
					plateAlpha = plateAlpha + 0.01;
				}
			}else{
				plateAlpha = 1;
			}
			context.setTransform(1,0,0,1,0,0);
			context.translate(plateX + .5*plateWidth, plateY + .5*plateHeight);
			context.scale(1,plateScale);
			context.globalAlpha = plateAlpha;
			context.drawImage(plate, -.5*plateWidth, -.5*plateHeight);
			context.setTransform(1,0,0,1,0,0);

			
			context.font = "20px";
			context.fillstyle = "#FFFFFF";
			context.fillText(plateText[actualText-1], (theCanvas.width/2) - (textWidth/2), theCanvas.height/2, 200);
		}
	}

        var bg = new Image();
        bg.src = "img/bg.jpg";

        var plate = new Image();
        plate.src = "img/plate.png";

	var plateX = 0;
	var plateY = 225;
	var plateWidth = 240;
	var plateHeight = 147;
	var plateScale = .7;
	var plateAlpha = 0;
	
	var plateText = ["Текст1", "Текст2", "Текст3"];
	
	var actualText = 1;
	var metrics = context.measureText(plateText[actualText-1]);
	var textWidth = metrics.width;

	var plateStatus = false;
	var plateFadeIn = false;
	var plateFadeOut = false; 

	var i = 0;

        gameLoop();

}


</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="240" height="400">
	<img src="img/123.jpg" alt="123">
</canvas>
</div>
</body>
</html>

Safort · #5 (**permalink**) 06.01.2015, 22:19

rolleyes,
конечно же)

rolleyes · #6 (**permalink**) 06.01.2015, 22:31

Кхм... Я не очень вас понял)) Вопрос все еще очень актуален! Наверно вы увидели сообщение,которое я не успел отредактировать! Я пишу в блокноте и чтобы понять какой номер строки пришлось сначала опубликовать тут))

Safort · #7 (**permalink**) 06.01.2015, 22:39

rolleyes,

Цитата:

конечно же)

я так ответил потому, что не увидел вопроса то ли из-за того, что ты его не дописал, то ли я проглядел.

Касаемо вопроса.
Посмотри, чем отличаются эти две строки кроме разных цветов?

context.fillStyle = "#FF0000";

и

context.fillstyle = "#FFFFFF";

rolleyes · #8 (**permalink**) 06.01.2015, 23:36

Значит JS чувствителен к регистру... Ясно... Спасибо добрый человек)) В свое время для меня манной был flasher.ru, теперь я кажется нашел себе новый обитель) Спасибо!

Форум

Справочник

Discord чат

Курсы javascript