javascript - 如何为 HTML5 Canvas 添加自定义坐标

Question

您能看一下This Demo吗？让我知道如何将 Canvas 的起点设置为从 0,0 到 500,1200？例如，如果我有一个坐标为 583 , 1642 的点然后能够将点添加为:

ctx.arc(583, 1642, 5, 0, Math.PI * 2, true);

$("#draw").on("click", function () {
    var ctx = $('#canvas')[0].getContext("2d");
    ctx.fillStyle = "#00A308";
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, Math.PI * 2, true);
    ctx.arc(75, 75, 5, 0, Math.PI * 2, true);
    ctx.arc(300, 300, 5, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
});

谢谢

Answer 1

您可以使用平移来移动坐标系。只需将其向相反方向移动即可，例如:

ctx.translate(-500, -1200);

现在，当您在 583、1642 处绘制某些内容时，它将显示在相对于视口(viewport)的 83、442 处。

要重置，只需变换回来或使用单位矩阵初始化:

ctx.setTransform(1, 0, 0, 1, 0, 0);

<强> Modified fiddle