Question

HTML5 Canvas存在问题。我使用jCanvas将图层添加到画布，但我的尺寸有问题。

我有2个矩形，一个绿色和一个红色。现在我希望红色框触摸绿色左上角。

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

Check this example

为什么这不起作用？

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

Answer 1

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

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

SELECT tblPerson.Id, tblPerson.Name, tblPerson.Score
FROM tblPerson
ORDER BY 
    Val(Choose([OrderBy],[ID],[Name],[Score])),
    Choose([OrderBy],[ID],[Name],[Score]);

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

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

希望这个帮助

html5画布中的尺寸

1 个答案: