Buenas tardes. Quería consultar, donde podría poner la función para recortarBordes, para que la bolita en cuestión no empiece desde el borde de la pantalla, sino desde el borde de canva. Dejo el código a continuación con la función antes mencionada.
`
`Muchas gracias!
Buenas, la circunferencia azul recorre el ancho del canvas
Podrías visualizarlo dejando un fondo con algún color y no limpiar la pantalla:
(Fondo del canvas)
...
function actualizarPantalla() {
pincel.fillStyle = "black";
disenharCircunferencia(x, 20, 10);
x++;
}
...(Fondo del body)
<style>
body {
background-color: gray;
}
</style>
Espero haber sido de ayuda, de ser así no olvides marcar como solucionado. Saludos :)
¡Hola muy buenas!
Me parece súper interesante tu consulta. Si seguimos el código de nuestro instructor, el parámetro de inicio del círculo está dado por la variable y contador x = 0; que interactúa con la función actualizarPantalla() . Entonces, si quieres que inicie desde otro lado debes modificar esa variable, por ejemplo:
var x = 20;
function actualizarPantalla(){
limpiarPantalla ();
disenharCircunferencia(x,20,10);
x++
}Ahora, dado que la función limpiarPantalla () borra todo, es difícil ver que inicie desde el borde del canvas. Estuve investigando y aquí te dejo mi código que permite tener el círculo moviendose dentro de la pantalla gris.
<body>
<canvas id="parent" width="600" height="400" style="position: absolute; z-index: 0"></canvas>
<canvas id="child" width="600" height="200" style="position: absolute; z-index: 1"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pantallaMovimiento = document.getElementById("child");
var pincel = pantalla.getContext("2d");
var pincelMovimiento = pantallaMovimiento.getContext("2d");
pincel.fillStyle = "grey";
pincel.fillRect(0,0,600,400);
function disenharCircunferencia (x,y,radio) {
pincelMovimiento.fillStyle = "blue";
pincelMovimiento.beginPath();
pincelMovimiento.arc(x,y,radio,0,2*Math.PI);
pincelMovimiento.fill();
console.log(x + "," + y);
}
function limpiarPantalla () {
pincelMovimiento.clearRect(0,0,600,200);
}
var x = 20;
function actualizarPantalla(){
limpiarPantalla ();
disenharCircunferencia(x,20,10);
x++
}
setInterval(actualizarPantalla, 10)
</script>
</body>¡Saludos!