Je veux savoir comment je peux traduire une scène entière déjà dessinée sur un canevas html5, par exemple 5 pixels plus bas. Je sais que la méthode translate ne fait que traduire le système de coordonnées du canevas, mais je veux savoir s'il existe un moyen de traduire la totalité de la scène déjà dessinée sur le canevas.Traduction d'une toile html5
Vous pouvez appliquer les transformations et appeler drawImage passant dans la toile elle-même.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
En faisant cela, le contenu original sera toujours ci-dessous. Selon l'effet que vous essayez d'accomplir, la définition de globalCompositeOperation peut vous aider.
Mais il est probable que vous aurez besoin d'utiliser drawImage pour copier d'abord dans un second canevas, effacer le courant, appliquer la transformation et dessiner à partir de la copie.
À moins de prendre une capture d'écran et de traduire cela.
Cependant, juste insérer
context.translate(0, 5)// or your values
juste avant votre code de dessin devrait faire l'affaire.
Référence: MDN Canvas Tutorial (Transformations)
J'ai déjà couvert cela, et (du moins je pensais que je l'ai fait) ce n'était pas ce que je voulais. Cette traduction traduira tout ce que je dessine après, pas tout ce qui est déjà dessiné. Cependant, votre solution de capture d'écran peut être ce que je voulais. Avez-vous des instructions sur la façon de faire cela? – George
L'objet Canvas possède une méthode appelée toDataUrl. Voir cette question http://stackoverflow.com/questions/934012/get-image-data-in-javascript –
Cela ressemble à ce que je voulais. Je vais essayer et vous dire si cela a fonctionné pour moi. – George
Cette solution a bien fonctionné pour moi. Cependant, cela ne fonctionne pas aussi bien quand il y a une mise à l'échelle. J'ai une toile où la mise à l'échelle est telle que la zone de dessin a une largeur et une hauteur de 120000 et 60000. L'élément de canevas lui-même a la largeur 1200 et la hauteur 600, donc la transformation est mise à l'échelle. Quoi qu'il en soit, le problème est que la traduction et la mise à l'échelle brouilleront l'image si je la copie dans un second canevas, effaçons le courant et appliquons la transformation et la copie comme vous l'avez dit. Je voulais juste savoir si tu savais comment le rendre non flou. – George
Oui, c'est exactement ce qui se passe. Le problème est que si je dessine à partir de la toile principale qui a la haute résolution à la toile de sauvegarde, il sera toujours dessiné en utilisant la résolution de base 1200x600, au lieu de la résolution 1200000x600000 mise à échelle. En outre, la solution de va-et-vient est OK pour mes besoins, car il suffit de le faire quand l'utilisateur le veut, et ne le fera pas continuellement. – George