HTML Canvas: comment dessiner une image inversée/en miroir?
j'essaie de retourner / miroir une image que je peins sur une toile HTML; j'ai trouvé un tutoriel de jeu montrant une feuille de sprite par direction un personnage doit faire face, mais cela ne me semble pas tout à fait juste :( D'autant plus que chaque cadre a une taille différente.
dans certains moteurs de jeu (comme cocos2D), je me souviens avoir utilisé des méthodes comme "flipX" qui dessinerait simplement le "joueur" regardant dans la direction opposée (c'est ma cible, en essayant de faire quelque plateforme de base).
Ce qui serait la meilleure technique pour vous pour atteindre cet objectif?
j'ai essayé d'appeler le setScale(-1,1); sur ma toile, sans succès. Peut-être que ce n'est pas fait pour ça.
Merci :)
3 réponses
Vous pouvez le faire en transformant le contexte
myContext.scale(-1,1)avant de dessiner votre image, maisCela va ralentir votre jeu. C'est une meilleure idée d'avoir un sprite séparé, inversé.
Vous devez définir l'échelle de la toile ainsi que l'inversion de la largeur.
la fonction ci-dessous est un extrait d'un de mes projets. Lorsque la fonction est appelée, elle prend une image d'une webcam nourrir, met sur la toile et d'inverser l'image horizontalement.
drawToCanvas : function(v, context, width, height){
context.save();
context.scale(-1,1);
context.drawImage(v,0,0,width*-1,height);
context.restore();
}
Il y a probablement des problèmes de performances avec cela, mais pour moi, ce n'était pas un problème.
vous n'avez pas besoin de redessiner l'image entière lors de la création d'un reflet. Une réflexion originale montre tout simplement la partie inférieure de l'image. De cette façon, vous redessinez une petite partie de l'image qui offre de meilleures performances et vous n'avez pas besoin de créer un gradient linéaire pour cacher la partie inférieure de l'image (puisque vous ne la dessinez jamais).
var img = new Image();
img.src = "//vignette2.wikia.nocookie.net/tomandjerryfan/images/9/99/Jerry_Mouse.jpg/revision/latest?cb=20110522075610";
img.onload = function() {
var thumbWidth = 250;
var REFLECTION_HEIGHT = 50;
var c = document.getElementById("output");
var ctx = c.getContext("2d");
var x = 1;
var y = 1;
//draw the original image
ctx.drawImage(img, x, y, thumbWidth, thumbWidth);
ctx.save();
//translate to a point from where we want to redraw the new image
ctx.translate(0, y + thumbWidth + REFLECTION_HEIGHT + 10);
ctx.scale(1, -1);
ctx.globalAlpha = 0.25;
//redraw only bottom part of the image
//g.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, 0, img.height - REFLECTION_HEIGHT, img.width, REFLECTION_HEIGHT, x, y, thumbWidth, REFLECTION_HEIGHT);
// Revert transform and scale
ctx.restore();
}; body {
background-color: #FFF;
text-align: center;
padding-top: 10px;
}<canvas id="output" width="500" height="500"></canvas>