![]() |
[résolu] Canvas - Version imprimable +- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org) +-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38) +--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51) +--- Sujet : [résolu] Canvas (/showthread.php?tid=6083) |
[résolu] Canvas - supermeganono - 11-04-2012 Bonjour, Après avoir lu pas mal de chose sur le SVG et les canvas trouver sur le forum, je me suis dis que je me devais de le tester. Plutôt sympa, je l'ai utiliser pour réaliser ma minicarte qui sera interactive. Jusque la tout va bien, canvas affiche ma carte 2D iso en miniature avec différents couleur pour les différents objets présent sur le secteur ( planète, vaisseau, allié, ennemi etc... ). Voici le code : [pastebin]CmamF9q1[/pastebin] Tout ceci marche vraiment impeccablement. Sauf que lorsque je veux vider mon canvas pour changer ce qu'il contient ben rien ne se passe ![]() Autrement dis au chargement, tout s'affiche proprement et lorsque je veux afficher le territoire d'une personne récupérer avec $("#territoire").val(); je rappelle ma fonction minicarte ( qui cette fois détecte le changement de $("#territoire").val(); ). Bien détecté les alert() me répondent bien que je suis dans le premier cas ( if ( cnom != "aucun" ) ). Il devrais donc le dessiner que des pixel noir ou de la couleur ffcc33 si les coordonnées sont présentes dans un tableau. Hors même après avoir trouver ctx.clearRect(0, 0, 200, 200); pour vider le canvas, celui-ci reste intact. Mon idée étant de vider le canvas au rappel de la fonction et de le redessiner. C'est ce que j'ai trouver sur le net, mais apparemment je dois certainement merder quelque part. Auriez-vous des pistes ? Des sites sur lesquels avoir des informations pour apprendre ( en français si possible ). Ceux trouver jusque maintenant ne m'ont pas vraiment fourni de réponses ou d'indication. Même le site du zéro ![]() http://www.vincent-rousseau.net/content/mini-paint-html5-avec-canvas C'est bizarre, je comprend pas pourquoi son clearRect fonctionne et pas le mien :cogne: Merci ! edit : coloration syntaxique RE: Canvas - Maks - 11-04-2012 ctx.clearRect(0, 0, canvas.width, canvas.height); Par ailleurs j'ai fait un topic qui regroupe des heures de recherche personnelle, d'exemple, de tuto sur canvas. Impossible que tu ne trouves pas ce qu'il te faut là dedans ![]() RE: Canvas - supermeganono - 11-04-2012 Ben malheureusement j'y ai déjà fait un tour ^^ J'avais fait une recherche forum avant de poster. J'ai balladé sur beaucoup de tes ressources, mais je ne trouve pas pourquoi je coince. Puis en anglais, je comprend pas toujours tout, ça aide pas. ctx.clearRect(0, 0, canvas.width, canvas.height); Déjà essayé, ça ne marche pas, le 72,72,200,200 ( car c'est un carré de 200-200 ) et le 72-72 parce que 0,0 me coupe l'image en deux, en diagonale. Surement à cause du rotate. Si j'ai bien pigé le canvas, il démarre à 0,0 mais ne le reste pas toujours selon nos manipulations. J'aimerai juste tout remettre à 0, le canvas, le pointeur etc. mais dur dur ![]() RE: Canvas - Sephi-Chan - 11-04-2012 Pense à utiliser le BBCode code=* pour indiquer le langage de la coloration syntaxique. RE: Canvas - Maks - 11-04-2012 Ah ! Mais juste c'est bizarre tes transfos. Tu fais un scale à la toute fin j'ai pas compris. T'as pas une page de test ? Il faut que tu sauvegardes puis restore la pile d'état du canvas pour repartir de 0,0
Sinon oui je donne beaucoup de liens en anglais, mais croit c'est de très très très très loin les meilleures ressources ![]() RE: Canvas - supermeganono - 11-04-2012 Ok donc j'ai retiré le ctx.scale qui n'avais pas d'utilité ici. Surement un ancien test que j'ai oublié de supprimer. J'ai ajouter le .save() et .restore en début et fin de fonction. Voici le résultat obtenu : au chargement : ![]() et l'affichage lorsque je lui demande de m'afficher le territoire ( donc l'identique, seul quelques points de couleur doivent changer qui sont enregistrer dans un tableau javascript ) ![]() Bizarrement je n'arrive pas à repartir de 0 et le ClearRect ne s'effectue donc pas depuis l'origine 0,0 du canvas. Les points semble être bien positionner mais apparemment il a doubler la rotation et ne prend donc pas le save() et restore ? EDIT : Pour tester => www.damocorp.com Login test pass test En haut gauche "chantier naval" Dans le menu qui apparait "En mission" et clique sur un des oeil Une fois sur la carte, la liste des territoires est en bas a droite et la minimap en bas a gauche. RE: Canvas - Maks - 11-04-2012 Ah oui j'ai eu le coup récemment ! Tu testes sous IE9 non ? Justement avant ton clearRect() met : ctx.setTransform(1, 0, 0, 1, 0, 0) Plus pratique je peux te filer ça de mes outils persos en attendant l'api v5 de canvas
Une autre solution ça aurait été de faire la rotation en sens inverse justement ça revient au même Sinon si tu mets ctx.clearRect(); ctx.save(); ctx.rotate(); ... ctx.restore(); ça doit le faire aussi RE: Canvas - supermeganono - 11-04-2012 Ok ça fonctionne nickel ! Par contre je comprend rien à la fonction ! Citation :Les méthodes de tranformation finale permettent de modifier directement la matrice de transformation.Source => https://developer.mozilla.org/fr/Tutoriel_canvas/Transformations tu peux m'expliquer le principe stp ? J'vais faire des test pour voir ce que ça donne et essayer de comprendre. Merci pour l'aide ! RE: [résolu] Canvas - Maks - 11-04-2012 En fait tu appliques à tes transformations la matrice identité 1 0 0 0 1 0 0 0 1 ce qui les remet à 0, c'est des maths ^^ La méthode reset() que je t'ai filée est mieux niveau sémantique. Ils vont l'ajouter dans la prochaine API pour canvas ![]() Sinon en dehors de ça, ça permet de faire des transfos plus complexes, genre 'skew' pour les animations CSS3. Pour avoir ce genre de résultat : http://www.html5canvastutorials.com/advanced/html5-canvas-shear-transform-tutorial/ De rien, si tu as d'autres questions... ![]() RE: [résolu] Canvas - supermeganono - 11-04-2012 Ok mes cours sur les matrices remonte tellement loin que j'vais devoir réviser ![]() Merci ! |