html - html5 画布中的尺寸

Question

我对 HTML5 Canvas 有疑问。我使用 jCanvas 向画布添加图层，但尺寸有问题。

我有 2 个矩形，一个绿色一个红色一个。现在我想让红色框触摸绿色的左上角。

使用坐标系，我从坐标 200、200 开始绿色，然后红色必须从 0,0 开始，宽度和高度必须为 200 和 200。但这不起作用

检查这个例子

为什么这不起作用？

当我使用100x100 尺寸时，它确实有效

Answer 1

一切都取决于图层的来源。默认情况下，它是图层的中心。因此，要获得您期望的结果，有两种解决方案（层 100*100 的示例）：

首先，在您的情况下，您必须计算从左上角画布原点到对象中间的正确位置：

$('canvas')
.addLayer({
  type: 'rectangle',
  name: 'redBox',
  fillStyle: '#c33',
  x: 50, y: 50,//canvas origin to center (100/2)
  width: 100, height: 100
})
.addLayer({
  type: 'rectangle',
  name: 'greenBox',
  fillStyle: '#585',
  x: 150, y: 150,//canvas origin to center (100 of red layer + 100/2)
  width: 100, height: 100
})
.drawLayers();

或者您可以通过禁用fromCenter属性将原点设置为左上角：

$('canvas')
.addLayer({
  type: 'rectangle',
  name: 'redBox',
  fillStyle: '#c33',
  fromCenter: false,
  x: 0, y: 0,
  width: 100, height: 100
})
.addLayer({
  type: 'rectangle',
  name: 'greenBox',
  fillStyle: '#585',
  fromCenter: false,
  x: 100, y: 100,
  width: 100, height: 100
})
.drawLayers();

希望这有帮助