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

我目前的想法以及他们为什么不工作

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

Answer 1

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

使用每个context.save（）将Canvas状态推送到堆栈上，并使用每个context.restore（）弹出。

因此你应该没有问题＆＃34;嵌套＆＃34;保存/恢复＆＃39; S

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

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

2 个答案: