如何水平移动旋转的画布？

时间：2015-03-24 23:32:58

标签： javascript html canvas

我想水平移动html画布，然后旋转它，然后再次水平移动它。问题是，在我旋转它并想再次移动它之后，旋转消失。我做错了什么？谢谢，我的代码在下面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

    <style type="text/css">
         #canvas {
            width:400px;
            height:400px;
            border:1px solid red;
         }
    </style>


    <canvas id="canvas"></canvas>

    <script type="text/javascript">


       var c=document.getElementById("canvas");
       var ctx=c.getContext("2d");
       var counterx = 0;                                   
       var canvasWidth = 400;
       var canvasHeight = 400;

       var imageObj = new Image(); 
       imageObj.onload = function() {
        ctx.drawImage(imageObj, counterx,0 ,69, 50);
      };
      imageObj.src = 'test.png';




      function moveRight() {
            ctx.save();
            counterx += 5;

            ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight); 
            ctx.drawImage(imageObj, counterx,0 ,69, 50);
            ctx.restore();
      }


      function rotate() {
          ctx.save();
          ctx.translate(counterx, 0);
          ctx.rotate(Math.PI / 4); 
          ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight); 
          ctx.drawImage(imageObj, counterx,0 ,69, 50);
          ctx.restore();
      } 






    </script>    


      <a onclick="moveRight(); return false;" href="#">move right</a>  
      <a onclick="rotate(); return false;" href="#">rotate</a>

  </body>
</html>

1 个答案:

答案 0 :(得分：0)

我建议累积值，然后仅在需要时进行绝对变换。稍微重构也可以更容易地跟踪这些更改，这里将使用常见的更新方法。

例如：

 var rotation = 0;
 var counterx = 0;

  function moveRight() {
      counterx += 5;
      update();
  }

  function rotate() {
      rotation += Math.PI / 4
      update();
  } 

  function update() {
      ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight); 
      ctx.translate(counterx, 0);             // absolute translate
      ctx.rotate(rotation);                   // absolute rotation
      ctx.drawImage(imageObj, 0, 0, 69, 50);  // we are already at counterx
      ctx.setTransform(1, 0, 0, 1, 0, 0);     // reset all transformations
  }

如果您想按图像的中心旋转，只需将上面的drawImage行替换为：

ctx.drawImage(imageObj, -69/2, -50/2, 69, 50);

现场演示

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var canvasWidth = 400;
var canvasHeight = 400;
var imageObj = new Image();

var rotation = 0;
var counterx = 0;

c.width = canvasWidth;
c.height = canvasHeight;

imageObj.onload = update;
imageObj.src = 'http://i.imgur.com/mP58PXJ.png';

function moveRight() {
  counterx += 5;
  update();
}

function rotate() {
  rotation += Math.PI / 4
  update();
}

function update() {
  var iw = imageObj.width, ih = imageObj.height;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.translate(counterx, ih);                // absolute translate
  ctx.rotate(rotation);                       // absolute rotation
  ctx.drawImage(imageObj, -iw*0.5, -ih*0.5);  // we are already at counterx
  ctx.setTransform(1, 0, 0, 1, 0, 0);         // reset all transformations
}

#canvas {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}

<canvas id="canvas"></canvas>
<a onclick="moveRight(); return false;" href="#">move right</a> 
<a onclick="rotate(); return false;" href="#">rotate</a>