Не срабатывает функция... Объясните почему?
Почему-то не срабатывает функция 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>
|
Посмотри на строки 62 и 90. Ты объявляешь функцию, а потом перезаписываешь её как объект класса Image.
И ещё, всегда объявляй переменные с помощью var, иначе постоянно подобные ошибки будут. |
Цитата:
|
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>
|
rolleyes,
конечно же) |
Кхм... Я не очень вас понял)) Вопрос все еще очень актуален! Наверно вы увидели сообщение,которое я не успел отредактировать! Я пишу в блокноте и чтобы понять какой номер строки пришлось сначала опубликовать тут))
|
rolleyes,
Цитата:
Касаемо вопроса. Посмотри, чем отличаются эти две строки кроме разных цветов? context.fillStyle = "#FF0000";и context.fillstyle = "#FFFFFF"; |
Значит JS чувствителен к регистру... Ясно... Спасибо добрый человек)) В свое время для меня манной был flasher.ru, теперь я кажется нашел себе новый обитель) Спасибо!
|
| Часовой пояс GMT +3, время: 03:09. |