如何使用 HTML5 Canvas 功能风格

Question

我正在使用 HTML5 的 Canvas 元素进行一些工作，我想知道如何以功能性方式最好地实现我自己的自定义绘制函数。其中每个都需要上下文，但我可以想到多种方法来将其提供给它们：

1. 将其作为参数添加到每个绘制函数调用
2. 将其添加为全局变量
3. 在每个绘制方法中调用“getContext”。
4. 扩展“CanvasRenderingContext2D”的原型。

如果可以避免的话，我不喜欢使用全局变量，所以我正在逐步淘汰选项 2。选项 3 需要太多的代码重复，所以我也忽略它。

这给我留下了选择 1，这是我用非函数式语言实现的方法，而 4 在我看来是最干净的方法，但我不完全确定它不会导致问题。你怎么做？我有理由不选择选项 4 吗？

为了说明这一点，我将为每个剩余选项添加一个代码示例。这是选项 1：

function drawPerson(context, ...) {
    context.fillRect(...);
    ...
}

$(function() {
    var context = $("#canvas")[0].getContext("2d");
    drawPerson(context, ...);
});

这里是选项 4：

CanvasRenderingContext2D.prototype.drawPerson = function(...) {
    this.fillRect(...);
    ...
}

$(function() {
    var context = $("#canvas")[0].getContext("2d");
    context.drawPerson(...);
});

Answer 1

另一种选择是使用包含所有绘图函数和initialize()的模块：

var Painter = (function(){

  var context = null;

  return {
    init : function(ctx){
      context = ctx;
    },
    drawPerson : function(){
      /* do stuff with context*/
    }
  }

})(); 

Painter.init($("canvas").getContext("2d"));
Painter.drawPerson();

这样只有一个全局变量，上下文仅设置一次，并且不会与其他对象混淆。