0

我需要弄清楚如何知道画布的原点是在顶部/左侧还是中心/中心或其他位置。也许是一种获取原点坐标的方法（即使我知道中心/中心的原点坐标也是 0、0）。

我有几个画布，我使用 toDataUrl 函数将其转换为图像。在转换之前，我需要为这些画布设置背景颜色。所以要这样做：

var curContext = curCanvas.getContext('2d');
curContext.globalCompositeOperation = "destination-over";
curContext.fillStyle = '#FFFFFF'; // or random color
curContext.fillRect(0, 0, curCanvas.width, curCanvas.height);
var image = curCanvas.toDataURL('image/jpeg', 1));

这些代码适用于在顶部/左侧有一个原点的画布，但是一些画布（由像超树这样的 puglin 生成）在中心/中心有一个原点，所以我的 fillRect 必须是这样的：

curContext.fillRect(-curCanvas.width/2, -curCanvas.height/2, curCanvas.width, curCanvas.height);

所以，我需要知道画布的原点是什么，才能知道如何使用fillRect函数（x 和 y 参数）。

谢谢你的帮助！

4

1 回答 1

1

仅当其他代码在其上使用了变换矩阵时，原点才会放错位置。

您可以通过保存上下文的当前状态、设置新矩阵然后恢复原始状态来覆盖该转换矩阵：

ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);   // identity
// do your drawing
ctx.restore();

较新版本的 Canvas API 具有ctx.resetTransform()并且还允许您查询当前的转换矩阵，但尚未得到广泛支持。

于 2013-04-11T10:17:11.917 回答