javascript - 如何使用 HTML5 Canvas 函数式样式

Question

我正在使用 HTML5 的 Canvas 元素做一些工作，我想知道如何以函数式方式最好地实现我自己的自定义绘图函数。这些中的每一个都需要上下文，但我可以想出多种方法来将其提供给他们:

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

如果可以避免，我不喜欢使用全局变量，所以我正在逐步淘汰选项 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();

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