如何使用HTML5 Canvas功能样式

Question

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

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

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

这让我有了选择1，这就是我在非功能性语言中的表达方式，而我认为这是最干净的方法，但我并不完全确定它不会导致问题。 你怎么做呢？ 我不应该选择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();

这样只有一个全局var，上下文只设置一次，你不会乱用其他对象。