sVETLANA2694,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение
исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте
http://javascript.ru/formatting.
<!DOCTYPE html>
<html>
<head>
<title>Фон</title>
<meta charset="utf-8">
<link href="style.php" type="text">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
#Go {
width:50px;
position:absolute;
top:110px;
left:190px;
background-color: #008000;
}
#Go:disabled{
background-color: #FF0000;
}
#Fon {
background-color:#40e0d0;
position:absolute;
top:100px;
left:100px;
right:100px;
bottom:100px;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
function Nit(x, y, len) {
this.x = x;
this.y = y;
this.len = len;
this.draw = function(context, color, globalAlpha) {
context.beginPath();
context.globalAlpha = globalAlpha;
context.lineWidth = 4;
context.strokeStyle = color;
context.moveTo(this.x, this.y);
context.lineTo(this.x, this.y + this.len);
context.stroke()
}
}
var nitP = new Nit(115, 60, 120);
var nitL = new Nit(55, 60, 430);
var canvas = document.getElementById("example");
var context = canvas.getContext("2d");
nitP.draw(context, "#000000", 1);
nitL.draw(context, "#000000", 1);
function Go() {
var self = this;
self.disabled = "disabled"
var from = nitP.len,
to = nitL.len;
timer({
from: from,
to: to,
duration: 5 * 1E3,
draw: function(x) {
context.clearRect(nitP.x - 2, nitP.y, 4, nitP.len);
nitP.len = x;
nitP.draw(context, "#000000", 1)
},
callback: function() {
nitP.draw(context, "#FF0000", 1)
}
});
timer({
from: to,
to: from,
duration: 5 * 1E3,
draw: function(x) {
context.clearRect(nitL.x - 2, nitL.y, 4, nitL.len);
nitL.len = x;
nitL.draw(context, "#000000", 1)
},
callback: function() {
nitL.draw(context, "#FF0000", 1);
self.disabled = null
}
})
}
function timer(a) {
var c = performance.now();
requestAnimationFrame(function d(b) {
b = (b - c) / a.duration;
1 < b && (b = 1);
a.draw(a.from + (a.to - a.from) * b | 0);
b == 1 && a.callback && a.callback();
1 > b && requestAnimationFrame(d)
})
}
$("#Go").click(Go)
});
</script>
</head>
<body>
<input type="button" id="Go" value="GO" />
<canvas id="example" width="1000" height="800"></canvas>
</body>
</html>
