How to move circle in canvas | Sololearn: Learn to code for FREE!
¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita
+ 16

How to move circle in canvas

29th Jun 2019, 5:11 AM
Abdul rahman;
Abdul rahman; - avatar
8 Respuestas
+ 13
@abdul raahman Your link doesn't work. It just gives an error. See this for moving circles: https://code.sololearn.com/W771S9eYuP9c/#html
30th Jun 2019, 6:31 PM
Green Ghost
Green Ghost - avatar
+ 9
Use JS.
30th Jun 2019, 5:08 AM
Sonic
Sonic - avatar
+ 6
like this, inside the main loop. context.arc(posx+dirx, posy+diry, 50, 0, 2 * Math.PI);
30th Jun 2019, 4:17 AM
Taste
Taste - avatar
+ 5
Give me an example
30th Jun 2019, 4:15 AM
Abdul rahman;
Abdul rahman; - avatar
+ 4
elipse function have x and y as the parameter, you can play around with both of this parameter to change its location while redrawing.
29th Jun 2019, 5:30 AM
Taste
Taste - avatar
+ 3
I don't think you can without putting white over the first one
30th Jun 2019, 1:01 PM
SapphireBlue
SapphireBlue - avatar
+ 2
Js
30th Jun 2019, 8:20 PM
D√•nńü√ęŇô √ü√łŇü
D√•nńü√ęŇô √ü√łŇü - avatar
+ 2
you dont need to use set timeout (its should be setinverval btw) in a loop. use requestAnimationFrame instead, it'll let the browser handle the animating part. you'll also need to clear the canvas before drawing the next frame. function move(){ ctx.clearRect(0,0,canvas.width,canvas.height); //this will clear the canvas. // draw other things here requestAnimationFrame(move); } requestAnimationFrame(move); // replacing your loop and setTimeout
1st Jul 2019, 10:07 AM
Taste
Taste - avatar