0

这应该很简单..但无法弄清楚：我在第一个矩形上使用旋转功能，但我正在旋转第二个矩形？？:( 在 Remmy Sharp 的回答之后更新了代码。但是现在盒子已经消失了。我只是想让两个盒子之一在他们的注册点上旋转。

哪里有问题 ？

 <!DOCTYPE HTML>
<html>
  <head>
    <style>
      #myCanvas {
        border: 1px solid #9C9898;
      }
       #myCanvas2 {
        border: 1px solid #9C9898;
      }
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.beginPath();
        context.rect(100, 100, 200, 100);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
        context.rotate(20*Math.PI/180); //<<<1st rectange should rotate 

        var canvas2 = document.getElementById('myCanvas2');
        var context2 = canvas2.getContext('2d') //<< updated as per Remmy Sharp's answer.

        context2.beginPath();
        context2.rect(200, 200, 200, 100);
        context2.fillStyle = '#8ED6FF';
        context2.fill();
        context2.lineWidth = 5;
        context2.strokeStyle = 'black';
        context2.stroke();

        //canvas2.rotate = 45 
        //context2.rotate(20*Math.PI/180)
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="500">

        <canvas id="myCanvas2"   width="400" height="200"></canvas>

    </canvas>

  </body>
</html>
4

1 回答 1

1

不，当你做第一个时，你正在绘制画布和第一个矩形context.stroke- 这会立即绘制像素。

然后你用 转换坐标系context.rotate，然后任何后续的画布使用新转换的坐标系（以及第二个油漆旋转的原因）。

第二个矩形被旋转的原因（即使你似乎有第二个画布）是......你有一个错字：

var context2 = canvas.getContext('2d');

应该读：

var context2 = canvas2.getContext('2d');

所以context2实际上与context您示例中的变量相同。

您还会注意到，当您使用上述修复更新代码时，旋转过多 - 您需要0,0在旋转之前平移中心点以获得您想要的效果（我认为）。

编辑并继续调试代码

因此，您的代码中还有很多问题，包括：

  1. 您已将第二个画布嵌套在第一个画布中 - 因此第二个画布实际上并不存在。
  2. 你的旋转非常大，我怀疑不是你想要的（就像我之前说的，你可能想在 50/50 中心点旋转，而不是 0,0）。
  3. 你的画布很大，而且彼此相邻。因此，当您绘制第二个画布时 - 您看不到它，因为它不在屏幕上。

这是固定的代码，并使画布更小（和红色的 CSS bg，所以我可以看到它们），我添加了一个动画来可视化第二个画布上的旋转：http: //jsbin.com/ovefux/1/edit

于 2012-08-13T12:21:36.353 回答