[英]How to horizontally flip an image
我如何才能仅绘制两个带有反转的图像我不知道如何反转。 请帮忙。
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);
首先,要删除2张不需要的图像,只需清除画布并重新绘制所需的图像即可。 您可以使用context.clearRect(0,0,canvas.width,canvas.height)
清除画布。
水平翻转图像
如何水平翻转图像:
将画布原点移动(平移)到所需的X坐标加上图像宽度: context.translate(x+img.width,y);
添加img.width是必要的,因为我们要抓住图像的左边缘并将其向左翻转。 如果不添加img.width,则会在所需的x坐标的左侧绘制img。
使用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); 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>
[添加:从Spritesheet翻转Sprite]
要翻转精灵表格中包含的精灵,可以使用drawImage
的裁剪形式。 通过指定sprite的spriteX, spriteY, spriteWidth & spriteHeight
裁剪drawImage将从spritesheet中裁剪所需的sprite。 通过指定所需的canvasX, canvasY, spriteWidth & spriteHeight
同一裁剪drawImage还将裁剪的子图像绘制到画布上。
这是显示如何从Spritesheet翻转Sprite的代码
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'>
这是一个简单的实用程序功能,它将在水平,垂直或两者上镜像。
// 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
要镜像图像,可以使用负缩放比例的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);
function mirrorImage(image, src_x, src_y, img_width, img_height, x, y){
// 1. MIRROR THE CANVAS
context.scale(-1, 1);
// 2. DRAW IN CANVAS USING (-X)
context.drawImage(image, src_x, src_y, img_width, img_height, - x, y,
img_width, img_height);
// 3. RETURN CANVAS TO ORIGINAL STATE (AFTER DRAWING)
context.scale(-1, 1);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.