如何水平翻转图像 [英] How to horizontally flip an image
问题描述
如何只绘制两个反转我不知道如何反转的图片。
var canvas = document.createElement（'canvas'）;
canvas.width = 16 * scale;
canvas.height = 32 * scale;
//为了CSS的目的，我们为图像赋予相同的类名
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，
上下文。 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）
画布并重绘所需的图像。您可以使用 context.clearRect（0,0，canvas.width，canvas.height）清除画布。
水平翻转图片
如何水平翻转图片：
-
画布原点到你想要的X坐标加图像宽度：
context.translate（x + img.width，y）;添加img.width是必要的，因为我们正在抓取图像的左边缘并向左翻转。 -
使用
context.scale（）横向翻转， -1,1）; -
绘制图像：`context.drawImage（img，0,0）;
-
通过将转换重置为默认值进行清理：
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）; flip（）;}} function {} {};}} function {};}}; // scaleX by -1;这个技巧水平翻转ctx.scale（-1,1）; //绘制img //不需要x，y，因为我们已经翻译了ctx.drawImage（img，0,0）; //始终清理 - 将转换重置为默认ctx.setTransform（1,0,0,1,0,0）;}
#canvas {border：1px solid red; margin：0 auto; }
< canvas id =canvaswidth = 300 height = 300>< / canvas>
添加：从spritesheet中翻转sprite]
要翻转spritesheet中包含的sprite，您可以使用裁剪形式 drawImage 。 cropping drawImage将通过指定sprite的 spriteX，spriteY，spriteWidth& spriteHeight 。相同的cropping drawImage也将通过指定愿望画布来将裁剪的子图像绘制到画布上 canvasX，canvasY，spriteWidth&
$ b
这里是显示如何从spritesheet翻转sprite的代码 b
#canvas {border：1px solid red; margin：0 auto; }
< h4>水平翻转sprite< / h4>< canvas id =canvaswidth = 300 height = 100>< / canvas>< h4> Spritesheet：< / h4>< img src ='https：// dl .dropboxusercontent.com / u / 139992952 / multple / cars.jpg'>
How can i draw only two images with reversing I don't know how to reverse. Pls help.
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);
First, to remove your 2 unwanted image, just clear the canvas and redraw the desired images. You can clear the canvas using context.clearRect(0,0,canvas.width,canvas.height).
Flip image(s) horizontally
How to horizontally flip an image:
Move (translate) the canvas origin to your desired X-coordinate plus the image width:
context.translate(x+img.width,y);Adding the img.width is necessary because we are grabbing the left edge of the image and flipping it leftward. Without adding img.width, the img would be drawn leftward of the desired x-coordinate.Flip horizontally using
context.scale(-1,1);Draw the image: `context.drawImage(img,0,0);
Clean up by resetting transformations to their default values:
context.setTransform(1,0,0,1,0,0);
Annotated code and a Demo:
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>
[Addition: flipping a sprite from a spritesheet]
To flip a sprite that's contained in a spritesheet you can use the cropping form of drawImage. The cropping drawImage will crop the desired sprite from the spritesheet by specifiying the sprite's spriteX, spriteY, spriteWidth & spriteHeight. The same cropping drawImage will also draw the cropped sub-image onto the canvas by specifying the desire canvas canvasX, canvasY, spriteWidth & spriteHeight.
Here is code showing how to flip a sprite from a 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'>
这篇关于如何水平翻转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
