append canvas

[Jean Nadon]

Bonjour, j'ai plusieurs canvas qui contiennent des images de billes, qui se déplacent et tournent etc.
Parfois elles se retrouvent sur un plateau qui pivote (rotate) . J'aimerais que les billes pivotent avec le plateau (appenChild?) et qu'elles puissent ensuite poursuivre seules(removeChild?)
j'ai essayer mais je n'y arrive pas. Quelqu'un aurait-il la recette pour imbriquer des canvas ou ctx l'un dans l'autre ?
Merci

[webmaster]

Bonjour

Je ne crois pas qu'on puisse imbriquer des canvas l'un dans l'autre.
Il faut dessiner dans un meme canvas et appliquer au ctx les effets voulus.

[Jean Nadon]

J'avais programmé dans Flash avec Actionscript la ligne:
Plateau1.addChild(Bille1); // mettre une bille sur le plateau
puis:
addChildAt(Bille1,10);// retirer la bille du plateau
C'était des MovieClips et ça fonctionnait bien. Quand le plateau tournait, la bille tournait avec.
Je réécris mon programme j'espère bien qu'il y ait une solution car programmer le déplacement de chaque bille selon sa position sur le plateau demanderait un temps fou.

[Jean Nadon]

Mais si je comprend bien ton idée webmaster
je crée un nouveau canvas avec le plateau et je dessine les billes dessus dans ce meme canvas.
je pivote ce canvas et ensuite, je ré-affiche le canvas du plateau vide (pivoté)et je réaffiche les billes
une par une en modifiant manuellement leur nouvelle position et rotation selon l'image finale du plateau ?

[webmaster]

Oui, c'est bien comme ça que je ferai.
Une transformation du contexte pour chaque bille à afficher, toutes sur le même canvas.

Mais il n'existe pas des scripts de migration flash vers html 5 ?

[Jean Nadon]

Ce serait faisable vu que le plateau bouge de façon constante.
J'ai essayé un transfert par AdobeAnimate2021 et ça ne fonctionne pas.
Ils ont un exemple de conversion d'une petite animation simple de 5 secondes mais mon programme est trop complexe je crois il fait 2500 lignes de code.
En tout cas si on a prévu que HTML5 avec canvas remplacerait Flash, je persiste qu'il doit y avoir un moyen d'imbriquer des canvas selon la notion de Programmation Orientée Objet. Quand je pense à tous ceux qui ont programmé des jeux en Flash, la déception.

Merci pour les réponses rapides.

[webmaster]

Je viens de faire quelques recherches

Il semble que drawImage() accepte un autre canvas en entrée
https://www.toutjavascript.com/referenc ... wimage.php

Cela permettrait donc de répondre au besoin plus facilement.

[gargvarun041]

Je réécris mon programme j'espère bien qu'il y ait une solution car programmer le déplacement de chaque bille selon sa position sur le plateau demanderait un temps fou.

[Jean Nadon]

J'ai réussi aisément a faire pivoter mes billes dans le plateau.
Le problème est que les billes roulent en se déplaçant, elles ont une rotation et
quand débute la rotation du plateau, les billes sont affichées bien droite sur le
plateau, elle ont perdues leur rotation.
Bref il faudrait afficher une image en rotation dans le plateau avant qu'il pivote lui-même avec les billes.
Voici, simplifié avec un seul plateau et une seule bille, le code:

class Billes
{
constructor()
{
this.x=0;
this.y=0;
this.etat="attente";// etat de la bille valeurs possibles : attente, cherche, roule , bloquée,enplateau,monte.
this.enchute=1;// vitesse de rotation de la bille sur elle-meme
this.vitessepente=5;
this.pointdepart=0;
this.pointcible=0;
this.noimage=4;// numéro du dessin de bille dans Images
this.rotation=0;
}// fin function Billes
}// fin classe Billes
class Plateaux
{
constructor()
{// constructeur
this.x=0;
this.y=0;
this.etat="vide";// etat du plateau, releve, abaisse, plein, vide,enmouvement
this.nbbilles=0;// nombre de billes sur le plateau
this.capacite=0;// nombre de billes maximum sur le plateau
}// fin function Plateau
}// fin classe Plateau
var canvasplateau1;
var canvasb0;
var ctxplateau1;
var ctxb0;
var implateau1 = new Image();
var imBille0 = new Image();
var LARBILLE = 25;
var HAUBILLE = 25;
var Plateau1=new Plateaux();// classe Plateaux
var Bille0=new Billes();
canvasplateau1 = document.getElementById("canvasplateau1");
ctxplateau1 = canvasplateau1.getContext("2d");
canvasb0 = document.getElementById("canvasb0");
ctxb0 = canvasb0.getContext("2d");
implateau1.src = "Images/Plateau1.png";
imBille0.src = "Images/Bille0.png";
// fin des déclarations, mise en marche de l'affichage:
setInterval(Rafraichir, 18);// affichage au 18 millisecondes.
}
function Rafraichir()
{
// traitement de l'algorithme du jeu, modification des x et y et rotations
// des divers éléments. A la fin de cette fonction , selon le données traitées
// on fait appel aux différents fonctions:
Rafraichirbille(nobille);//seules celles qui bougent
Pivoterplateau1droite(); // pivotement avec les billes dessus lorsque requis
}
function Raifraichirbille(Unno)
{//bille qui se déplace et tourne
Tabctx[Unno].clearRect(0, 0, CANWIDTH, CANHEIGHT);
Tabctx[Unno].save();
Tabctx[Unno].translate(TabBilles[Unno].x, TabBilles[Unno].y);
Tabctx[Unno].rotate(TabBilles[Unno].rotation * Math.PI / 180);
Tabctx[Unno].drawImage(TabImages[TabBilles[Unno].noimage], -LARBILLE/2, -HAUBILLE/2, LARBILLE, HAUBILLE);
Tabctx[Unno].restore();
}

function Pivoterplateau1droite()
{//plateau qui pivote
ctxplateau1.clearRect(0, 0, CANWIDTH, CANHEIGHT);
ctxplateau1.save();
ctxplateau1.translate(Plateau1.x, Plateau1.y);//emplacement du pivot
ctxplateau1.rotate(Plateau1.rotation * Math.PI / 180);
ctxplateau1.drawImage(implateau1, -100, -50, 200, 100);
ctxplateau1.restore();
// insertion d'un bille sur le plateau:
ctxb0.clearRect(0, 0, CANWIDTH, CANHEIGHT);
ctxb0.save();
ctxb0.translate(Plateau1.x, Plateau1.y);
ctxb0.rotate(Plateau1.rotation * Math.PI / 180);
ctxb0.drawImage(imBille0, Bille0.x-12.5, Bille0.y-12.5, LARBILLE, HAUBILLE);
ctxb0.restore();
}

[Jean Nadon]

Quelle joie de résoudre une énigme . Voici pour ceux qui auraient le même besoin comment faire un rotate() sur une image elle meme "rotatée":
function Pivoterplateau1droite()
{//plateau qui pivote:
ctxplateau1.clearRect(0, 0, CANWIDTH, CANHEIGHT);
ctxplateau1.save();
ctxplateau1.translate(Plateau1.x, Plateau1.y);//emplacement du pivot
ctxplateau1.rotate(Plateau1.rotation * Math.PI / 180);
ctxplateau1.drawImage(implateau1, -100, -50, 200, 100);
ctxplateau1.restore();
// bille qui pivote dans sur le plateau:
ctxb0.clearRect(0, 0, CANWIDTH, CANHEIGHT);
ctxb0.save();
ctxb0.translate(Plateau1.x, Plateau1.y);
ctxb0.rotate(Plateau1.rotation * Math.PI / 180);
ctxb0.translate(Bille0.x, Bille0.y);
ctxb0.rotate(Bille0.rotation * Math.PI / 180);
ctxb0.drawImage(Bille0.noimage], -LARBILLE/2, -HAUBILLE/2, LARBILLE, HAUBILLE);
ctxb0.restore();
}