如何使用HTML5 Canvas功能樣式

我正在做一些HTML5的Canvas元素的工作，我想知道如何以功能的方式最好地實現我自己的自定義繪製功能。每一種都需要上下文，但我能想到的多種方式提供給他們：如何使用HTML5 Canvas功能樣式

作爲參數，將它添加到每個繪圖函數調用
添加它作爲一個全局變量
呼叫「getContext」在每個繪製方法中。
擴展'CanvasRenderingContext2D'的原型。

我不喜歡使用全局變量，如果我能避免它，所以我正在逐步淘汰選項2.選項3需要太多的代碼重複，所以我也忽略了這一點。

這讓我有了選擇1，這就是我如何用非功能性語言來做到這一點，而我認爲這是最乾淨的方法，但我並不完全確定它不會導致問題。你怎麼做呢？爲什麼我不應該選擇第四種選擇是否有原因？

爲了說明這一點，我將爲每個剩餘的選項添加一個代碼示例。這裏的選項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(...); 
});

來源

2011-03-31 futlib

另一種選擇是使用包含所有的繪圖功能的模塊，並初始化（）：

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();

那有辦法只有一個全局變量，上下文只設置一次，並且不會混淆其他對象。

來源

2011-03-31 10:27:39 noiv

這是我認爲最好的解決方案。它包裝了所有的功能，只在一個地方暴露了上下文功能（初始化，但即使這樣也可以被抽象掉）。這意味着，例如，從2D上下文更改爲3D上下文會容易得多，因爲您只需要更改界面，而不是使用界面更改所有代碼。即使轉換到SVG界面也會更簡單。 – Blixt 2011-03-31 10:30:54

模塊模式確實是一個不錯的方法，謝謝！ – futlib 2011-03-31 11:37:28

如何使用HTML5 Canvas功能樣式

回答

相關問題