我怎样才能只绘制两个带有反转的图像我不知道如何反转。请帮忙。
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 个不需要的图像,只需清除 Canvas 并重新绘制所需图像即可。您可以使用 context.clearRect(0,0,canvas.width,canvas.height)
清除 Canvas 。
水平翻转图像
如何水平翻转图像:
将 Canvas 原点移动(平移)到您想要的 X 坐标加上图像宽度:
context.translate(x+img.width,y);
添加 img.width 是必要的,因为我们捕获了图像的左边缘并将其向左翻转。如果不添加 img.width,img 将绘制在所需 x 坐标的左侧。水平翻转使用
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]
要翻转 Sprite 表中包含的 Sprite ,您可以使用 drawImage
的裁剪形式。裁剪 drawImage 将通过指定 Sprite 的 spriteX、spriteY、spriteWidth 和 spriteHeight
从 spritesheet 中裁剪出所需的 Sprite 。同样的裁剪 drawImage 也会通过指定想要的 Canvas canvasX, canvasY, spriteWidth & spriteHeight
将裁剪后的子图像绘制到 Canvas 上。
这里的代码显示了如何从 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'>
关于javascript - 如何水平翻转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35973441/