Javascript 画布中的垂直旋转图像

如何仅使用

Canvas

（不使用WebGL等）垂直旋转图像

我正在研究类似于

-webkit transform:rotateY（）在CSS3中。
您可以尝试以下操作-

  // translate context to center of canvas
  context.translate(canvas.width / 2, canvas.height / 2);

  // rotate 45 degrees clockwise
  context.rotate(Math.PI / 4);

旋转变换需要以弧度为单位的角度。
[编辑：哎呀！我想我误解了你的问题。你想用3D效果翻转，而不是webGL。]

是的，您可以在没有webGL的情况下在画布上进行3D旋转。

几个画布库提供3D画布旋转

看一看和K3D（效果不错！）：

看看格林斯托克：

如果您根本不想要任何库，请查看K3D。它的许可证足够自由，允许您提取所需的旋转代码

function rotate(angle) {
    ctxH.clearRect(0, 0, width, height);
    ctxH.save();
    ctxH.translate(width / 2, height / 2);
    ctxH.rotate(angle * Math.PI / 180);
    ctxH.drawImage(img, -width / 2, -height / 2);
    ctxH.restore();
}



[我下面的原始答案可能与您的要求不符，但我还是把它留在这里]

下面介绍如何垂直翻转画布图像

当你想垂直翻转时，讽刺的是你是在水平轴上翻转

要在水平轴上翻转，请使用context.scale，如下所示：

context.scale(1,-1);  // flip vertically--using the HORIZONTAL axis !

下面是代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvasH=document.getElementById（“canvasH”）；
var ctxH=canvasH.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
//在水平轴上翻转
//（导致倒置）
画布宽度=图像宽度；
画布高度=img高度；
ctxH.save（）；
ctxH.刻度（1，-1）；
ctxH.平移（0，-img.高度）；
ctxH.drawImage（img，0,0）；
ctxH.restore（）；
}
img.src=”http://dl.dropbox.com/u/139992952/houseIcon.png";
}); // end$（函数（）{}）；
我喜欢@markE-answer，我想我也会发布这个。它允许您将图像旋转到所需的任何角度

function rotate(angle) {
    ctxH.clearRect(0, 0, width, height);
    ctxH.save();
    ctxH.translate(width / 2, height / 2);
    ctxH.rotate(angle * Math.PI / 180);
    ctxH.drawImage(img, -width / 2, -height / 2);
    ctxH.restore();
}

不是这样的。我必须在Y轴上旋转上下文，而不是顺时针旋转。