|
Анимация. Увеличение и уменьшение длины линии
Имеется код, в котором содержится описание линий(одна - короче, другая - длиннее). Нужно, чтобы при нажатии кнопки "Go" длины линий изменились(длинная стала меньше, короткая - длиннее).Анимация...чтобы было видно как меняются длины этих линий. Помогите пожалуйста.
<!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:30px;
position:absolute;
top:110px;
left:190px;
}
#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 = 1;
context.strokeStyle=color;
context.moveTo(this.x,this.y);
context.lineTo(this.x,this.y + len);
context.stroke();
};
}
function NachNit()
{
var nitP = new Nit(115,55,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()
{
}
NachNit();
$('#Go').click(Go);
});
</script>
</head>
<body>
<input type="button" id="Go" value="GO" />
<canvas id="example" width="1000" height="800"></canvas>
</body>
</html>
|