0

これは単純なはずですが、理解できません。最初の長方形で回転関数を使用していますが、2番目の長方形を回転させています?? :( Remmy Sharp の回答の後にコードを更新しました。しかし、今はボックスが消えています。2 つのボックスのうちの 1 つを基準点で回転させたいだけです。

問題はどこだ ？

 <!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キャンバスへの後続のペイントでは、新しく変換された座標系が使用されます (したがって、2 番目のペイントが回転する理由)。

そして、2番目の長方形が回転する理由は（2番目のキャンバスがあるように見えますが）...タイプミスがあるためです：

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

読むべき：

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

実際には、例の変数context2と同じです。context

また、上記の修正でコードを更新すると、回転が大きすぎることに気付くでしょう。0,0回転する前に中心点を移動して、必要な効果を得る必要があります (私はそう思います)。

コードを編集してデバッグを続ける

したがって、コードには次のようなさらに多くの問題があります。

  1. 最初のキャンバス内に2 番目のキャンバスをネストしたため、2 番目のキャンバスは実際には存在しません。
  2. あなたの回転はかなり大きく、あなたが求めているものとはまったく違うと思います (前に言ったように、おそらく 0,0 ではなく 50/50 の中心点で回転したいでしょう)。
  3. あなたのキャンバスは巨大で、互いに隣り合っています。したがって、2 番目のキャンバスをペイントすると、画面外にあるため表示されません。

これは修正されたコードで、キャンバスを小さくし (そして、CSS の背景が赤く見えるようにしました)、アニメーションを追加して、2 番目のキャンバスの回転を視覚化しました: http://jsbin.com/ovefux/1/edit

于 2012-08-13T12:21:36.353 に答える