1

Canvasのみを使用して（WebGLなどを使用せずに）画像を垂直に回転するにはどうすればよいですか?

私は-webkit-transform: rotateY();CSS3のようなものを見ています。

4

3 に答える 3

4

[編集：おっと！私はあなたの質問を誤解したと思います。webGL なしで、3D 効果でフリップしたい。]

はい、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

私は@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の修正デモ（アニメーション付き）

于 2013-03-19T18:37:58.763 に答える