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

**Programir** · 24/12/2021, 00h20

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 ?

**Dave Hiock** · 24/12/2021, 16h01

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

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

**Programir** · 26/12/2021, 03h05

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 ;=

**Archimède** · 27/12/2021, 21h25

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.

**Programir** · 28/12/2021, 11h37

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

**Archimède** · 28/12/2021, 13h24

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager