Mettre à jour la balise de toile html sur chaque requête ajax avec de nouvelles données

Les boîtes ne bougent pas parce que le code pour les déplacer n'est jamais appelé.

Si vous déplacez la partie animant les boîtes de updateUsers() sur votre boucle d'animation principale, elles seront animées.

Déplacez la section de cette partie:

 function updateUsers() { fetchData(); // this part ------------------------------------------------------ $.each(users, function(index, user) { if (user.x <= 0) user.dir.x = 1; if (user.x + user.width > canvas.width) user.dir.x = -1; if (user.y <= 0) user.dir.y = 1; if (user.y + user.height > canvas.height) user.dir.y = -1; user.x += user.dir.x; user.y += user.dir.y; }); // to here -------------------------------------------------------- //window.setTimeout(updateUsers, 1000 / 60); window.setTimeout(updateUsers, 9000); } 

jusqu'ici:

 function drawUsers() { ctx.clearRect(0, 0, canvas.width, canvas.height); $.each(users, function(index, user) { ctx.beginPath(); ctx.rect(user.x, user.y, user.width, user.height); ctx.strokeStyle = 'red'; ctx.stroke(); if (user.connections != null) { user.connections.forEach(function(id) { const other = users.find(user => user.id === id); ctx.beginPath(); ctx.moveTo(user.x + (user.width / 2), user.y + (user.height / 2)); ctx.lineTo(other.x + (other.width / 2), other.y + (other.height / 2)); ctx.strokeStyle = 'black'; ctx.stroke(); }); } }); // animate here $.each(users, function(index, user) { if (user.x <= 0) user.dir.x = 1; if (user.x + user.width > canvas.width) user.dir.x = -1; if (user.y <= 0) user.dir.y = 1; if (user.y + user.height > canvas.height) user.dir.y = -1; user.x += user.dir.x; user.y += user.dir.y; }); window.requestAnimationFrame(drawUsers); } 

Puisque nous n'avons pas accès au service Web que vous utilisez, et en supposant que les données sont correctement retournées, j'ai dû décommenter les données prédéfinies pour faire une démonstration de travail:

Mise à jour de jsbin

J'ai travaillé à partir de votre code source Code Violon, ce qui m'a beaucoup aidé.

Ajouté quelques choses:

Première fonction séparée pour ajouter un utilisateur au tableau des users . De cette façon, les utilisateurs peuvent facilement être ajoutés après un appel Webservé.

Deuxièmement, ajouté quelques fonctions helper pour obtenir des positions et des directions aléatoires.

 function addUser(user) { users.push({ id: user.UserId, connections: user.Connections, width: 80, height: 80, x: getRandomX(), y: getRandomY(), dir: { x: getDir(), y: getDir() } }); } // the success callback from your webservice // guess this receives a `user` object with Id and Connections // for the test we use `getRandomConnections` function getDataFromWebService() { let newUser = { "UserId": Date.now(), "Connections": getRandomConnections() }; addUser(newUser); } 

Violon

Lorsque vous connectez votre service Web, vous pouvez abandonner la fonction et la référence getRandomConnections . Dans votre rappel de succès de service web, assurez-vous d'avoir un objet dans le format:

 { UserId: 1337, Connections: [1, 2] } 

Passez cet objet à la fonction addUser .