Question

如何仅使用Canvas（没有WebGL等）垂直旋转图像？

我正在查看CSS3中的-webkit-transform: rotateY();。

Answer 1

[编辑：哎呀！我想我误解了你的问题。你想用3D效果翻转，只是没有webGL。]

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

多个画布库提供3D画布旋转......

看看和K3D（NICE特效！）：http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html

看看GreenSock：http://www.greensock.com/css3/

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

[我在下面的原始答案可能偏离了你想要的东西 - 但无论如何我都会留在这里]

以下是如何垂直翻转画布图像

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

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

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

这是代码和小提琴：http://jsfiddle.net/m1erickson/JBCGC/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvasH=document.getElementById("canvasH");
    var ctxH=canvasH.getContext("2d");

    var img=new Image();
    img.onload=function(){
      // flip on the horizontal axis
      // (causes upside down)
      canvasH.width=img.width;
      canvasH.height=img.height;
      ctxH.save();
      ctxH.scale(1,-1);
      ctxH.translate(0,-img.height);
      ctxH.drawImage(img,0,0);
      ctxH.restore();
    }
    img.src="http://dl.dropbox.com/u/139992952/houseIcon.png";


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvasH" width=300 height=300></canvas>
</body>
</html>

Answer 2

你可以试试这个 -

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

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

旋转变换需要一个弧度角。 Reference

Answer 3

我喜欢@markE的答案，我想也会发布这个。它允许您将图像旋转到您需要的任何角度。

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();
}

<强> markE's Modified Demo (with animation)

在画布中垂直旋转图像

3 个答案: