[canvas] Utiliser la fonction rotate() sur une image

Version imprimable

24/12/2021, 00h20
Programir

[canvas] Utiliser la fonction rotate() sur une image

Salut

j'ai regard� sur plusieurs lieux pour trouver comment faire tourner une image autour de son centre avec canvas de HTML5, mais c'est toujours la meme m�thode de faire tourner le canvas.
Moi c'est l'image que je veux tourner pas la surface, car le canvas re�oit aussi d'autres images qui ne doivent pas etre retourn�es.

j'avais vu une fonction sur gamecreator qui tournait des images (rotate) sans toucher au reste, c'est dommage que canvas le propose pas.

Le html et javascript ne proposent que le css et le canvas pour faire tourner une image, hors si on touche au canvas �a se r�percute sur les autres images qui sont sur le canvas, c'est en plus dommage de g�rer un canvas juste pour une image, imaginons que j'ai plusieurs munitions qui tournent dans le ciel, je vais pas faire un canvas pour chacune, la gestion de rotate par le canvas c'est pas pratique.
Et le CSS �a fait pas vraiment programmation jeu, �a fait programmation site internet, et c'est pas fluide en plus.
C'est dommage, y a des langages de programmation qui proposent la rotation d'images, et une grande pub est faite pour le canvas mais il est pas pratique pour les jeux.
Je me demande comment font les jeux androids pour avoir plein d'effets de rotation ?
24/12/2021, 16h01
Dave Hiock

\�/
l'Api canvas te permet d'avoir une ardoise comme terrain de jeu, une image bitmap en quelque sorte ni plus ni moins.

Citation:

Moi c'est l'image que je veux tourner pas la surface,

Lorsque tu dessines une image et que tu souhaites la redessiner plus loin ou en rotation, il te faut effacer la zone et redessiner ton image.

Peut-�tre devrais-tu montrer le code que tu as pour que quelqu'un puisse t'aider.

Lecture : Efficient animation for web games
26/12/2021, 03h05
Programir

Salut, merci de ta r�ponse, pour le moment je n'ai pas de code ayant besoin de la rotation mais je souhaite en faire un, ce sera un bonhomme vu de dessus comme dans GTA2 et qu'on pourrait tourner selon l'angle qu'on veut, pas seulement les 8 angles, mais sur 360 degr�s.
Mais il serait affich� sur la m�me surface que d'autres personnages, alors c'est ce qui m'embette avec la rotation du canvas, c'est qu'elle vise tout le canvas, alors que je voudrais seulement tourner l'image du perso principal.

Merci pour le lien ;=
27/12/2021, 21h25
Archim�de

Salut, avec contexte.save() et contexte.restore(), tu dois pouvoir le faire...Apr�s, il faut effacer entre chaque frame avec contexte.clearRect(..... ) pour une animation.
28/12/2021, 11h37
Programir

Je te remercie, je ferais surement avec �a, canvas c'est pas la facilit� :/

Apr�s, canvas, c'est plut�t simple et efficace seulement c'est du bitmap avec les inconv�nients associ�s...
J'avais tent� hier un essai de rotation d'une image au centre avec un trait en d�placement horizontal simultan�ment...
(Si �a peut t'aider pour te montrer que c'est possible) Apr�s j'utilise Snap SVG et peu les m�thodes de canvas...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>rotation composée</title>
<style>
  canvas { 
    border: 1px solid black; 
  }
</style>
</head>
<body>
 
<canvas id="cancan" width="1000" height="500"></canvas>
 
<script>
let ctx = document.getElementById("cancan").getContext("2d");
let image = new Image();
image.src = "image.png";
 
const dgTord= Math.PI/180;
const ctxw=ctx.canvas.width, ctxh=ctx.canvas.height;
const posx = ctxw / 2, posy = ctxh / 2;
const pw=6;
 
const cx=64, cy=64;//centre de ton image
var angle=0,dx=0;// angle de rotation en degrés et déplacement dx horizontal d'un trait
 
 
function newframe() {
  draw();
  rotation();
}
 
function rotation() {
   angle += dgTord;
   dx++;
}
 
function draw() {
  ctx.clearRect(0,0,ctxw,ctxh );
  ctx.lineWidth=pw;
  ctx.beginPath();
  ctx.moveTo(20+dx,posy-pw/2);
  ctx.lineTo(dx,posy-pw/2);
  ctx.stroke();
  ctx.save();
  ctx.translate(posx, posy);
  ctx.rotate(angle);
  ctx.translate(-cx,-cy);
  ctx.drawImage(image,0,0);
  ctx.restore();
}
 
setInterval(newframe, 1000/60); 
</script>
 
</body>
 
</html>

Sinon pour le faire en vectoriel, voici un lien int�ressant :
https://darchevillepatrick.info/svg/svg20.php

28/12/2021, 17h10
NoSmoking

Bonjour,

Citation:

Envoy� par Archim�de

setInterval(newframe, 1000/60);

:nono: il existe window.requestAnimationFrame(callback) qui est plus adapt�.

Citation:

Envoy� par Programir

je ferais surement avec �a, canvas c'est pas la facilit�

...c'est vrai avec tout ce que l'on connais mal.
Il existe �galement des biblioth�ques, qui sont bien faites, pour t'aider � r�aliser tes animations.

Il te faut savoir que ce n'est pas forc�ment la seule solution car si j'en crois ce que tu souhaites faire, rotation d'une image sur un fond, tu peux tout aussi bien l'envisager en CSS pur avec ou sans keyframe.
28/12/2021, 17h58
Archim�de

Citation:

Bonjour,
:nono: il existe window.requestAnimationFrame(callback) qui est plus adapt�.

Oui, mais avec les machines de guerre que l'on a maintenant, setInterval() ne provoque pas de saccades dans la plupart des cas...Au moins les intervalles entre chaque frame sont constants. Apr�s 30 fps suffisent largement...
Mais window.requestAnimationFrame(newframe) est plus recommand� pour les diesels...
28/12/2021, 18h54
Programir

Oh merci, bien s�r que �a va m'aider ;)

requestframe je l'ai essay� en premier mais vraiment j'ai �t� d��u par mes animations mais d�s que je l'ai remplac� par interval tout s'est r�gl� ;)

En plus un des avantages suppos� de request d'apr�s ce que j'ai lu, c'est le fait que le navigateur stoppe l'anim quand on est passe � un autre onglet, mais je me suis apper�u qu'interval fait de m�me.

EDIT :

Archim�de : Ton code fonctionne bien ;)
il rotate autour du coin haut gauche de l'image mais c'est normal et c'est un truc que je peux r�gler je crois en donnant un nouveau centre � l'image avec les commentaires que tu as mis dedans ;)
28/12/2021, 20h29
Archim�de

En effet, il faut adapter Cx et Cy en fonction de la taille de ton image. Pour moi, c'�tait une image de 128 sur 128 pixels, d'o� mes valeurs fix�es � 64...
29/12/2021, 12h30
NoSmoking

Citation:

Envoy� par Archim�de

Oui, mais avec les machines de guerre que l'on a maintenant, setInterval() ne provoque pas de saccades dans la plupart des cas...

� Les m�thodes setTimeout, setIntervalet requestAnimationFrame n�utilisent pas la m�me gestion des piles d�appel.

� setTimeout ne met � jour l'�cran que lorsqu'il le � souhaite/peut �, et non lorsque le contexte le permet.

� requestAnimationFrame est synchronis�es avec la GPU et monopolise moins de CPU.
Le navigateur optimise l�affichage de l�animation fonction de la configuration, c�est lui qui fixe la fr�quence de rafraichissement.

Citation:

Au moins les intervalles entre chaque frame sont constants. Apr�s 30 fps suffisent largement...

� Que cela soit la m�thode, setTimeout, setInterval ou encore requestAnimationFrame on n�a absolument aucune garantie que les frames se succ�dent � intervalle r�gulier ou toutes les xms.

Citation:

Mais window.requestAnimationFrame(newframe) est plus recommand� pour les diesels...

� Non toutes les litt�ratures, r�centes, que tu pourras trouver te dirons qu'il est pr�f�rable d'utiliser requestAnimationFrame.

Citation:

Envoy� par Programir

requestframe je l'ai essay� en premier mais vraiment j'ai �t� d��u par mes animations mais d�s que je l'ai remplac� par interval tout s'est r�gl� ;)

... sur ce coup j'aimerais voir le code que tu as utilis� car au pire cela ne peut pas �tre pire :mrgreen:

Salut, je n'ai pas dit que tu avais tort mais l'objectif �tait de combiner une rotation du context avec une autre animation donc je ne me suis pas polaris� sur la mani�re d'afficher les frames qui me paraissait secondaire vis � vis de la question...
Et puis, je ne vois pas une diff�rence fondamentale entre les deux propositions en terme de fluidit� :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>rotation composée</title>
<style>
  canvas { 
    border: 1px solid black; 
  }
</style>
</head>
<body>
 
<canvas id="cancan" width="1000" height="500"></canvas>
 
<script>
let ctx = document.getElementById("cancan").getContext("2d");
let image = new Image();
image.src = "image.png";
 
const dgTord= Math.PI/180;
const ctxw=ctx.canvas.width, ctxh=ctx.canvas.height;
const posx = ctxw / 2, posy = ctxh / 2;
const pw=6;
 
const cx=64, cy=64;//centre de ton image
var angle=0,dx=0;// angle de rotation en degrés et déplacement dx horizontal d'un trait
 
 
function newframe() {
  draw();
  rotation();
  window.requestAnimationFrame(newframe);
}
 
function rotation() {
   angle += dgTord;
   dx++;
}
 
function draw() {
  ctx.clearRect(0,0,ctxw,ctxh );
  ctx.save();
  ctx.translate(posx, posy);
  ctx.rotate(angle);
  ctx.translate(-cx,-cy);
  ctx.drawImage(image,0,0);
  ctx.restore();
  ctx.lineWidth=pw;
  ctx.beginPath();
  ctx.moveTo(20+dx,posy-pw/2);
  ctx.lineTo(dx,posy-pw/2);
  ctx.stroke();
}
//setInterval(newframe,1000/60);
window.requestAnimationFrame(newframe); 
</script>
 
</body>
 
</html>

29/12/2021, 13h42
Archim�de

Citation:

Envoy� par Programir

requestframe je l'ai essay� en premier mais vraiment j'ai �t� d��u par mes animations mais d�s que je l'ai remplac� par interval tout s'est r�gl� ;)

En effet comme le dit NoSmoking, il ne faut pas exag�rer tout de m�me, c'est du plus ou � peu pr�s l'�quivalent mais pas du moins... ;)
30/12/2021, 16h58
Programir
Pour ceux qui seraient interess�s, voici une formule pour calculer x et y pour une rotation voulue, en d�pla�ant chaque pixel de l'image.

Rotation d'une image par pixel :
Code:

1 2 3 4 5 6 pxX = pxX + width/2 pxY = pxY + height/2 newPxX = imgX + width/2 + pxX.cos(a) - pxY.sin(a) newPxY = imgY + height/2 + pxX.sin(a) + pxY.cos(a)
Ce code pourrait �tre mis dans le dossier jeux 2D peut-�tre.

Ce code est issu d'une aide d'un matheu � un programmeur sur un forum d'entraide.