Question

这应该很简单..但无法弄清楚：我在第一个矩形上使用旋转功能，但我得到第二个矩形旋转？ :( 在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>

Answer 1

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

然后你用context.rotate转换坐标系，然后对画布的任何后续绘画使用新变换的坐标系（因此旋转第二个绘画的原因）。

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

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

应阅读：

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

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

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

编辑并继续调试代码

因此，您的代码中存在更多问题，包括：

你已经嵌套了第一个里面的第二个画布 - 所以第二个画布确实不存在。

你的轮换非常大，我怀疑你不是很喜欢（就像我之前说的那样，你可能想要以50/50的中心点旋转，而不是0,0）。

你的画布很大，彼此相邻。因此，当您绘制第二个画布时 - 您无法看到它因为它在屏幕外。

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

HTML5，如何加载方形图片或绘制一个简单的正方形，并将其旋转45度

1 个答案: