如何使用 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();

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