Question

我需要弄清楚如何知道画布的原点是在顶部/左侧还是中心/中心或者其他什么。也许是一种获取原点坐标的方法（即使我知道原点在中心/中心的坐标也是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生成的像hypertree）在中心/中心有一个原点，所以我的fillRect必须是这样的：

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

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

感谢您的帮助！

Answer 1

如果其他代码在其上使用了转换矩阵，则原点只会放错地方。

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

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

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

确定画布的原点（javascript）

1 个答案: