Как использовать функциональный стиль HTML5 Canvas - PullRequest
Новая
       3

Как использовать функциональный стиль HTML5 Canvas

3 голосов
/ 31 марта 2011

Я работаю с элементом Canvas в HTML5, и мне интересно, как лучше реализовать мои собственные, настраиваемые функции рисования функциональным способом. Каждому из них понадобится контекст, но я могу придумать несколько способов дать ему это:

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

1 Ответ

4 голосов
/ 31 марта 2011

Другой вариант - использовать модуль, который содержит все функции рисования, и 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();

Таким образом, существует только одна глобальная переменная, контекст задается только один раз, и вы не связываетесь сдругие объекты.

...