javascript - 如何有选择地将一个函数中的所有画布动作转移到另一个函数

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();
};

问题

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

我目前的想法以及它们为什么行不通

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

Answer 1

尝试您最初的多次保存/恢复想法。

画布状态通过每个 context.save() 推送到堆栈上，并通过每个 context.restore() 弹出。

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

Answer 2

您可以在函数范围之外创建变量

var coordinates;

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