Question

假设我有一个400x200画布。我想在一个坐标系中工作，其中(0, 0)位于画布的正中间，而正y表示正向，而正x表示正确。

所以，我将变换设置如下：

var ctx = document.getElementById("canvas").getContext("2d");
ctx.setTransform(1, 0, 0, -1, 200, 100);
ctx.fillRect(-20, -20, 40, 40);

<canvas id="canvas" style="width: 400px; height: 200px"></canvas>

因此，当我在上面的片段中填充矩形时，我希望看到一个位于canvas元素中间的正方形。但是，当运行上面的代码片段（在最新的Chrome中）时，方块显然没有居中。为什么是这样？我误解了关于变换矩阵的一些事情吗？如果是这样，可以如何实现我的目标？

Answer 1

canvas元素的大小未正确设置，这意味着画布默认高度为150像素，然后使用CSS拉伸。这给出了对象偏移的错觉。

要正确设置画布大小，请使用其属性而不是CSS：

<canvas id="canvas" width=400 height=200></canvas>

另外请注意，Y轴现在可以颠倒翻转，因此任何文本和图像也会被倒置。这些将需要正确绘制局部转换。

Answer 2

问题似乎是style中的维度被忽略，默认为标准维度300×150。所以用

正确设置它们

<canvas id="canvas" width="400" height="200"></canvas>

独立于此，不依赖硬编码尺寸是个好主意，特别是如果你打算使用局部坐标系。

我的代码段修改：

使用实际画布尺寸和比例，以便本地坐标至少包含方格(-100,100)×(-100,100)。
在设置转换之前添加一个坐标十字，这表示即使画布是＆＃34;错误＆＃34;，方块也在坐标原点。
转换后，在正y位置添加一个圆圈，以显示＆＃34; up＆＃34;真的很高兴。

＆＃13;

var cnv = document.getElementById("canvas");
var w = cnv.width, h = cnv.height;
var ctx = cnv.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,h/2); ctx.lineTo(w,h/2); 
ctx.moveTo(w/2,0); ctx.lineTo(w/2,h);
ctx.closePath(); ctx.stroke();

var scale = Math.min(w,h)/200.0;

ctx.setTransform(scale, 0, 0, -scale, w/2, h/2);

ctx.moveTo(0,50); ctx.arc(0,50,10,0,2*Math.PI); ctx.stroke();

ctx.fillRect(-20, -20, 40, 40);

＆＃13;

<canvas id="canvas" width="450" height="250"></canvas>

＆＃13;

Canvas转换的行为不符合预期

2 个答案: