¿Alguna idea? Dejo el código de lo que he conseguido hasta el momento.
Saludos
Código:
<!DOCTYPE html>
<html>
<body>
<div style="position: absolute; top: 80px; left: 10px; z-index: 2;">
<canvas id="figuras" width="800" height="800"></canvas>
</div>
<div style="position: absolute; top: 80px; left: 10px; z-index: 1">
<canvas id="limpiar" width="800" height="800"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("figuras");
var context = canvas.getContext("2d");
var rango_superior = 400;//Posición máxima en pixeles colocación dentro del canvas.
var rango_inferior = 44; //Posición minima en pixeles colocación dentro del canvas.
var radius = 40;//Radio de cada círculo.
var yinicial;
var xinicial;
var yfinal;
var xfinal;
var xactual;
var yactual;
yinicial="40";
xinicial="40";
yfinal="156";
xfinal="345";
xactual=xinicial;
yactual=yinicial;
temporizador=setInterval(mover,10);
function mover(){
si();
limpiar();
dibujar_linea();
circulo();
}
function limpiar(){
context.beginPath();
context.rect(0, 0, 1000,4400);
context.fillStyle = "#ffffff";
context.fill();
context.closePath();
}
function circulo(){
context.beginPath();
context.arc(xactual, yactual, radius, 0, 2 * Math.PI, false);
context.fillStyle ="#ccccff";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
//Posicion del círculo inicialmente.
context.beginPath();
context.arc(xinicial, yinicial, radius, 0, 2 * Math.PI, false);
context.fillStyle ="#ccccff";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
}
function dibujar_linea(){
context.beginPath();
context.moveTo(xactual,yactual);
context.lineTo(xinicial,yinicial);
context.lineWidth = 5;
context.strokeStyle = "#FF00ff";
context.stroke();
context.closePath();
}
function si(){
if(xactual>xfinal){
xactual--;
}
else if(xactual<xfinal){
xactual++;
}
if(yactual>yfinal){
yactual--;
}
else if(yactual<yfinal){
yactual++;
}
}
</script>
</body>
</html>
