如何為HTML5畫布添加自定義坐標

Question

您能否看一下此演示，並讓我知道如何將畫布的起點設置為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處繪制某個東西時，它將相對於視口顯示在83、442處。

要重置，只需變換回去或使用單位矩陣初始化即可：

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

改良的小提琴