1

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

我在看类似-webkit-transform: rotateY();CSS3 的东西。

4

3 回答 3

4

[编辑：哎呀！我想我误解了你的问题。你想用 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>
于 2013-03-19T17:43:40.380 回答
-1

你可以试试这个——

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

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

旋转变换需要一个以弧度为单位的角度。 参考

于 2013-03-19T16:42:38.410 回答
-1

我喜欢@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的改装Demo（带动画）

于 2013-03-19T18:37:58.763 回答