如何水平翻转图像

Question

我如何绘制只有两个图像与逆转我不知道如何反转。请帮助。

var canvas = document.createElement('canvas'); 
    canvas.width = 16 * scale; 
    canvas.height = 32 * scale; 
    //we assign the same classname the image has, for CSS purposes 
    canvas.setAttribute('class', skinImage.getAttribute('class')); 
    canvas.setAttribute('title', skinImage.getAttribute('title')); 
    var context = canvas.getContext("2d"), 
    s = scale; 
    context.imageSmoothingEnabled=!1, 
    context.mozImageSmoothingEnabled=!1, 
    context.oImageSmoothingEnabled=!1, 
    CanvasRenderingContext2D.webkitImageSmoothingEnabled=!1, 
    context.clearRect(0,0,canvas.width,canvas.height); 

    //back draw the head 
    context.drawImage(skinImage, 24, 8, 8, 8, 4*s, 0*s, 8*s, 8*s); 
    //back draw the body 
    context.drawImage(skinImage, 32, 20, 8, 12, 4*s, 8*s, 8*s, 12*s); 
    //back draw the right leg 
    context.drawImage(skinImage, 52, 20, 4, 12, 12*s, 8*s, 4*s, 12*s); 
    //back draw the right arm 
    context.drawImage(skinImage, 12, 20, 4, 12, 8*s, 20*s, 4*s, 12*s); 

    //back draw the left arm 
    context.drawImage(skinImage, 12, 20, 4, 12, 4*s, 20*s, 4*s, 12*s); 
    context.drawImage(skinImage, 52, 20, 4, 12, 0*s, 8*s, 4*s, 12*s); 

Answer 1

首先，要删除您的2不需要的图像，只需清除画布并重新绘制所需的图像。您可以使用context.clearRect(0,0,canvas.width,canvas.height)清除画布。

翻转图像（S）水平

如何水平翻转图像：

1. 移动（平移）画布原点您想要的X坐标加上图像宽度：context.translate(x+img.width,y);添加img.width是必要的，因为我们抓住图像的左边缘并且flipp它向左。在不添加img.width的情况下，img将被绘制为所需x坐标的左侧。水平使用context.scale(-1,1);

2. 绘制图像

3. 翻转：`context.drawImage（IMG，0,0）;

4. 清理通过重新转变为默认值：context.setTransform(1,0,0,1,0,0);

注释的代码和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sillouette2.png"; 
 
function start(){ 
 

 
    ctx.fillText('original',10,30); 
 
    ctx.drawImage(img,10,30); 
 

 
    ctx.fillText('flipped',150,30); 
 
    flipHorizontally(img,150,30); 
 

 
} 
 

 
function flipHorizontally(img,x,y){ 
 
    // move to x + img's width 
 
    ctx.translate(x+img.width,y); 
 

 
    // scaleX by -1; this "trick" flips horizontally 
 
    ctx.scale(-1,1); 
 
    
 
    // draw the img 
 
    // no need for x,y since we've already translated 
 
    ctx.drawImage(img,0,0); 
 
    
 
    // always clean up -- reset transformations to default 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
}

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

[加法：翻转精灵f rom spritesheet]

要翻转spritesheet中包含的精灵，可以使用drawImage的裁剪形式。裁剪drawImage将通过指定精灵的spriteX, spriteY, spriteWidth & spriteHeight来从精灵画面裁剪所需的精灵。相同的裁剪drawImage也会通过指定愿望画布canvasX, canvasY, spriteWidth & spriteHeight将裁剪后的子图像绘制到画布上。

下面是代码显示如何从一个spritesheet

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg"; 
 
function start(){ 
 

 
    var spriteX=92; 
 
    var spriteY=63; 
 
    var spriteW=80; 
 
    var spriteH=40; 
 

 
    ctx.fillText('original',10,30); 
 
    ctx.drawImage(img,spriteX,spriteY,spriteW,spriteH,10,30,spriteW,spriteH); 
 

 
    ctx.fillText('flipped',150,30); 
 
    flipSpriteHorizontally(img,150,30, spriteX,spriteY,spriteW,spriteH); 
 

 
} 
 

 
function flipSpriteHorizontally(img,x,y,spriteX,spriteY,spriteW,spriteH){ 
 
    // move to x + img's width 
 
    // adding img.width is necessary because we're flipping from 
 
    //  the right side of the img so after flipping it's still 
 
    //  at [x,y] 
 
    ctx.translate(x+spriteW,y); 
 

 
    // scaleX by -1; this "trick" flips horizontally 
 
    ctx.scale(-1,1); 
 

 
    // draw the img 
 
    // no need for x,y since we've already translated 
 
    ctx.drawImage(img, 
 
       spriteX,spriteY,spriteW,spriteH,0,0,spriteW,spriteH 
 
       ); 
 

 
    // always clean up -- reset transformations to default 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
}

#canvas{border:1px solid red; margin:0 auto; }

<h4>Drawing & horizontally flipping a sprite</h4> 
 
<canvas id="canvas" width=300 height=100></canvas> 
 
<h4>Spritesheet:</h4> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg'>

Answer 2

要镜像图像，您可以使用setTransform负面的规模。

context.setTransform(-1, 0, 0, 1, 0, 0); //Now all images will be horizontally mirrored 
context.drawImage(<myimage>, srcx, srcy, srcw, srch, dstx, dsty, dstw, dsth); 

当你完成后，不要忘记恢复变换。

context.setTransform(1, 0, 0, 1, 0, 0); 

Answer 3

镜像图像

这里翻转子画面是一个简单的工具的功能，将水平镜像的图像，垂直或两者。

// arguments 
// ctx : the context on which to draw the mirrored image 
// image : the image to mirror 
// x,y : the top left of the rendered image 
// horizontal : boolean if true mirror along X 
// vertical : boolean if true mirror along y 
function mirrorImage(ctx, image, x = 0, y = 0, horizontal = false, vertical = false){ 
    ctx.save(); // save the current canvas state 
    ctx.setTransform(
     horizontal ? -1 : 1, 0, // set the direction of x axis 
     0, vertical ? -1 : 1, // set the direction of y axis 
     x + horizontal ? image.width : 0, // set the x origin 
     y + vertical ? image.height : 0 // set the y origin 
    ); 
    ctx.drawImage(image,0,0); 
    ctx.restore(); // restore the state as it was when this function was called 
} 

使用

mirrorImage(ctx, image, 0, 0, true, false); // horizontal mirror 
mirrorImage(ctx, image, 0, 0, false, true); // vertical mirror 
mirrorImage(ctx, image, 0, 0, true, true); // horizontal and vertical mirror 

更多镜子

如果您希望能够沿着任意线路镜一看便知Mirror along line