如何使用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，上下文只設置一次，你不會亂用其他對象。