javascript - HTML5 キャンバスの特定領域の描画

Question

多くの描画が大きなキャンバスの特定の領域 (この場合は中央) 内にある場合、その特定の「サブキャンバス」内で作業していると言う方法はありますか?描画するたびにマージンを加算/減算する必要がありますか? 座標を指定するたびに、コードがより複雑に見えるだけです。

Answer 1

を使用して座標の原点を変更できますtranslate()。

まず、 を使用して元の原点を保存しsave()ます。次に、画面の描画領域の中心に合う原点を見つけて、 を呼び出しますtranslate(x, y)。描画を行ってから、 を使用restore()して以前の原点を取り戻します。

jsFiddle .

Answer 2

drawimage を使用して、オフスクリーン キャンバスを別のキャンバスの特定の部分に描画できます。

新しいキャンバス オブジェクトを作成し、そこにすべてのものを描画します。最後に、ある座標で drawimage を使用して、そのキャンバスを画面上のキャンバスに描画します。

Answer 3

Canvas の一般的なライブラリであるKinetic.jsGroupを使用すると、レイヤーを作成できます。xこの の座標、高さ、y幅を指定できますGroup。このグループ内で図形を追加したり、他のものを描画したりすることもできます。

ここに例があります：

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var shapesLayer = new Kinetic.Layer();

  /*
   * create a group which will be used to combine
   * multiple simple shapes.  Transforming the group will
   * transform all of the simple shapes together as
   * one unit
   */
  var group = new Kinetic.Group({
    x: 220,
    y: 40,
    rotationDeg: 20
  });

  var colors = ['red', 'orange', 'yellow'];

  for(var n = 0; n < 3; n++) {
    // anonymous function to induce scope
    (function() {
      var i = n;
      var box = new Kinetic.Rect({
        x: i * 30,
        y: i * 18,
        width: 100,
        height: 50,
        name: colors[i],
        fill: colors[i],
        stroke: 'black',
        strokeWidth: 4
      });

      group.add(box);
    })();
  }

  shapesLayer.add(group);
  stage.add(shapesLayer);

グループを追加する方法に関するチュートリアルは次のとおりです。