How to move a drawing in HTML5 canvas without getting the mouse or keyboard position? Another way?

Asked

Viewed 1,208 times

0

I’m learning canvas in HTML5. I was able to draw a circle, using Javascript to move, I got through mouse events and keyboard arrows. But I wonder if there’s any way I can determine that position through a variable or something?? Does anyone have any idea?

javascript html5

  • I’m on mobile now and it gets complicated to search and paste the links, but search for "jsfiddle games" has several games on canvas, I saw one of the cover (Snake) in which she moves alone, find it and one studied in the code...

  • Your idea is to calculate/generate a path where a certain element will travel?

2 answers

1

You can create an Interval that will increment variables, which would change the position of the object. Another option is to have an array of pre-defined positions, in the latter case you can use Math.Random() and get random values.

0

Well as colleagues have said, you want to play a random value so that it moves alone or by a path creating an animation, or just put a fixed value?

If it is the first case just change the variable that receives the value of the "mouse" or "keyboard" for the fixed value, if it is the animation (as I think it is), you have 2 options play random values or add a Rigger (trigger) so that every 'X seconds' for example the position of your drawing is updated in the drawing area giving the movement.

There are currently 3 ways to do this:
window.setTimeout: Calls a function only 1x
window.setInterval: Calls a function infinitely

window.requestAnimationFrame: This function has similar function to the other two, the difference between it and the other is that it was implemented in HTML5 and has focus on animation so roughly it works better the processing of calls.

So the idea is so that your browser is ready to trigger one of these events that update the positions of the elements of the 'canvas', below put a simple example of a circle, circling (rs) the area of 'canvas'.

<canvas id="seuCanvas" width="1024" height="780" style="border: 1px solid #000000;"></canvas>
<script>
// Inicia a chama do canvas no JS
var canvas = document.getElementById("seuCanvas"), context = canvas.getContext("2d");

var amimacao = 1000; // Tempo da animação (em milisegundos)
var radius = 15; // Determina o raio do circulo

// Monta o circulo no canvas com a posição
function desenhaCirculo() {
 // Calcula uma posição aleatória para o X
 var centerX = Math.floor((Math.random() * canvas.width) + 1);
 // Calcula uma posição aleatória para o Y
 var centerY = Math.floor((Math.random() * canvas.height) + 1);

 // Limpa e desenha o circulo na posição
 context.clearRect(0, 0, canvas.width, canvas.height);
 context.beginPath();
 context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 context.fillStyle = "#00FF00";
 context.fill();
 context.lineWidth = 1;
 context.strokeStyle = "#00000";
 context.stroke();

 // Adiciona uma cahama a cada X milisegundos
 window.setTimeout(desenhaCirculo, amimacao);
}

// Adiciona movimento ao carregar a página
window.onload = desenhaCirculo;
</script>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.