<!-- html ----------------------------->
<meta charset="utf-8">
<canvas width="600" height="400">
</canvas>
<!-- javascript ----------------------------->
<script type="text/javascript">
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
function dibujarCirculo(x, y, radio, colorRelleno, colorBorde) {
pincel.fillStyle = colorRelleno;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*3.14);
pincel.fill();
pincel.strokeStyle = colorBorde;
pincel.lineWidth = 5;
pincel.stroke()
}
function limpiarPantalla() {
pincel.clearRect(0,0,600,400);
}
var x = 0;
var bandera = 0;
function actualizarPantalla(coorX) {
limpiarPantalla();
dibujarCirculo(coorX, 20, 10, "red", "black");
}
function irVenir() {
if (x == 0) {
bandera = 0;
}
if (x == 600) {
bandera = 1;
}
if (bandera == 0){
x++;
}
if (bandera == 1){
x--;
}
actualizarPantalla(x);
}
setInterval(irVenir,1);
</script>