javascript - 如何通过另一个函数有选择地移动一个函数中的所有 Canvas 操作

Question

考虑以下示例。

var ctx = document.createElement('canvas').getContext('2d');
function draw(){
    ctx.fillRect(10,10,10,10);
};
function render(){
    var coordinates = {x:100,y:200};
    draw();
};

问题

这足以从 Canvas 的顶部和左侧绘制一个 10 像素的黑色矩形。但是，如何指示程序将函数 draw 中绘制的所有内容移动 coordinates 中的值？

我目前的想法及其行不通的原因

1. 通过保存和恢复上下文来使用翻译方法。这是不可靠的，因为绘制函数可能也包括保存和恢复，它们会发生冲突。
2. 在单独的 Canvas 上绘制 draw 函数中的所有内容，然后使用 drawImage 将该 Canvas 绘制到具有所需翻译的所需 Canvas 上。示例:draImage(canvas,coordinates.x,coordinates.y);。这失败了，因为 draw 函数是在与 ctx 相同的范围内创建的，即使在 render 中重新定义了 ctx > 它仍然会使用原来的 ctx 进行绘制。
3. 将函数转换为字符串并使用正则表达式来移动所有绘图值...非常不切实际。
4. 使用像素操作...这也会将内容移到绘图函数之外，因此必须将其丢弃。

Answer 1

尝试多次保存/恢复的原始想法。

Canvas 状态在每次 context.save() 时被压入堆栈，并在每次 context.restore() 时弹出。

因此，“嵌套”保存/恢复应该没有问题。