如何水平移动旋转的画布

how to move rotated canvas horizontally?

本文关键字：旋转 移动 何水平 水平      更新时间：2023-09-26

我想水平移动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>

我建议累积这些值，然后只在需要时进行绝对变换。一点重构也可以使跟踪这些更改变得更容易，在这里，这将使用一个通用的更新方法。

例如：

 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>

相关文章：