您能看一下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();
});
谢谢
最佳答案
您可以使用平移来移动坐标系。只需将其向相反方向移动即可,例如:
ctx.translate(-500, -1200);
现在,当您在 583、1642 处绘制某些内容时,它将显示在相对于视口(viewport)的 83、442 处。
要重置,只需变换回来或使用单位矩阵初始化:
ctx.setTransform(1, 0, 0, 1, 0, 0);
<强> Modified fiddle
关于javascript - 如何为 HTML5 Canvas 添加自定义坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23667749/