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

Posted 2023-03-14

【中文标题】如何有选择地将一个函数中的所有画布动作转移到另一个函数

【英文标题】：How to shift all the canvas actions in one function by another function selectively

【发布时间】：2013-04-20 16:27:02

【问题描述】：

考虑以下示例。

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 中的值？

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

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

【参考方案1】：

试试你原来的多次保存/恢复的想法。

每个 context.save() 都将画布状态推送到堆栈上，并使用每个 context.restore() 弹出。

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

【参考方案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();
;

【讨论】：

不幸的是，这不是一个选项，因为绘图函数是用户提交的，我希望他们在该函数中指示的所有内容都可以移动，但是程序需要它。