javascript - 在 HTML5 画布的特定区域绘图

Question

如果我的很多绘图都将在我的较大画布的特定区域内（在这种情况下，在中心），有没有办法说你正在那个特定的“子画布”中工作，而不是每次要绘制时都必须添加/减去边距？每次我指定坐标时，它只会让我的代码看起来更加复杂。

Answer 1

您可以使用 更改坐标的原点translate()。

首先，使用 . 保存原始原点save()。然后，找到适合屏幕绘图区域中心的原点并调用translate(x, y). 做你的画，然后用它restore()来取回你以前的原点。

js小提琴。

Answer 2

Kinetic.js是一个流行的 Canvas 库，允许您创建Group图层。您可以指定 this 的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);

这是有关如何添加组的教程

Answer 3

您可以使用 drawimage 将屏幕外画布绘制到另一个画布的某个部分。

创建一个新的画布对象并将你所有的东西都画到它上面。最后，在某个坐标处使用 drawimage 将该画布绘制到您的屏幕画布上。