我不知道如何在 moveTo() 之后获取实际的绘图光标位置。查看我的代码：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 20);
// here i want to get from "ctx" actual offset
ctx.lineTo(20,30);
ctx.closePath();
有什么办法或者我必须将偏移量存储在我自己的变量 offsetX, offsetY 中？
我假设你的意思是你有一堆相对路径命令，你想移动它们。
例如，要在左上角画一个三角形，你可以这样写：
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();
那么，如果您想使用相同的路径，但要从 (175, 175) 开始绘制三角形呢？无需更改您moveTo和所有后续绘图命令，您所要做的就是翻译上下文。
ctx.save();
ctx.translate(175, 175);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();
// save/restore lets you undo the translation so the next object starts at (0,0)
// you could just call ctx.translate(-175, -175); at the end instead though
ctx.restore();
翻译上下文会改变绘图表面的原点，并允许您随其移动所有坐标（临时或不移动）。这意味着您可以定义一堆路径并在各处使用相同的命令重绘它们，使用ctx.translate.
在这里查看两个三角形：