Bonjour,
Je suis actuellement entrain de faire un petit jeux avec Canvas et Javascript pour apprendre et je suis confronter à un probleme.
Je souhaiterais imbriquer plusieurs canvas et pouvoir afficher tous les objets à l'intérieur de chacun.
J'ai réussi à afficher 1 seul niveau de canvas mais impossible d'afficher les sous niveaux.
exemple de se que je souhaite réaliser :
voici le résultat :
Je n'arrive pas à afficher le carré vert :(.
Voici le code qui génère le carrée bleu :
var Container = Rectangle.extend(function(config){
var childrens;
var canvas;
var context;
var _parent
this.constructor = function (config){
this.super(config);
canvas = (typeof config.canvas == "string" ) ? document.createElement('canvas') : config.canvas;
canvas.id = (typeof config.canvas == "string" ) ? config.canvas : config.canvas.id;
// vérifie que le canvas est supporter
Canvas.isCanvasSupported(canvas);
// récupère le context 2d
context = canvas.getContext('2d');
// initialise les enfants
this.childrens = new ArrayList();
};
/**
* Permet de récupérer le container parent
* @param {Container}
*/
this.getParent = function(){
return _parent;
};
/**
* Permet de modifier le container parent
* @param {Container} p_parent
*/
this.setParent = function(p_parent){
_parent = p_parent;
};
/**
* Permet de dessiner les objet à l'intérieur du container
* @return {void}
*/
this.render = function(){
// carré vert
context.beginPath();
context.fillStyle = 'green';
context.fillRect(10,10,10,10);
// carré bleu
_parent.context.fillStyle = 'blue';
_parent.context.fillRect(this.getPosX(),this.getPosY(),this.getWidth(),this.getHeight());
};
});
Je vous remercie d'avance pour votre aide