html5 canvas 中的维度

Question

我对 HTML5 Canvas 有疑问。我使用 jCanvas 向 canvas 添加层，但我对尺寸有疑问。

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

使用坐标系，我在坐标 200, 200 处开始绿色那么红色必须从 0,0 开始，宽度和高度必须是 200 和 200。但这不起作用

Check this example

为什么这行不通？？

当我使用 100x100 dimensions 时它确实有效

Answer 1

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

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

$('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();

希望对您有所帮助

html5 canvas 中的维度

Dimensions in html5 canvas

html

jcanvas

html5-canvas