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>