Oto moje wskazówki

1) Użyj clearRect, aby wyczyścić płótno zamiast płótna./ width = " 50%" / szerokość, ponieważ później resetuje Stany canvas

2) Jeśli używasz zdarzeń myszy na kanwie użyj następującej funkcji, jej jest niezawodna i działa w większości przypadków.

/**  returns the xy point where the mouse event was occured. 
 @param ev The event object.
*/
function getXY(ev){
   return getMousePosition(ev, ev.srcElement || ev.originalTarget);
}

 /**  returns the top-left point of the element
       @param elem The element
   */
function getElementPos(elem){
   var obj = elem;
   var top = 0;
   var left = 0;
    while (obj && obj.tagName != "BODY") {
      top += obj.offsetTop-obj.scrollTop;
      left += obj.offsetLeft -obj.scrollLeft ;
      obj = obj.offsetParent;
     }
  return {
    top: top,
    left: left
    };
};

/**  returns the xy point where the mouse event was occured inside an element. 
@param ev The event object.
 @param elem The element
*/
function getMousePosition(evt, elem){
var pageX, pageY;
if(typeof(window.pageYOffset)=='number') {
    pageX=window.pageXOffset;
    pageY=window.pageYOffset;
}else{
    pageX=document.documentElement.scrollLeft;
    pageY=document.documentElement.scrollTop;
}
var mouseX = evt.clientX - getElementPos(elem).left + pageX;
var mouseY = evt.clientY - getElementPos(elem).top + pageY;
return {
    x: mouseX,
    y: mouseY
};
};

3) Użyj ExplorerCanvas, jeśli chcesz wspierać IE7

4) zamiast wyczyścić całe płótno Wyczyść tylko część, która jest potrzebna do czyszczenia. To dobre dla wydajności.

Facebook Facebook, który używa Canvas i użytkowników informacje profilowe (ilość danych musi pomieścić jest ogromna dla niektórych), aby dopasować Ciebie i twoich znajomych również za pomocą aplikacji, do sportowców olimpijskich jak 6 stopni typu separacji rzeczy, jest sporo nauczyłem się w moich rozległych wysiłków, aby zrobić wszystko, co mogłem ewentualnie spróbować zwiększenia wydajności w aplikacji.

Dosłownie spędziłem miesiące i dni w czas na ponowne uwzględnienie kodu, który znałam już tak dobrze i uważałam, że jest to najbardziej optymalny sposób na robienie rzeczy.

Użyj elementów DOM W miarę możliwości

Faktem jest, że przeglądarki nadal nie są gotowe do obsługi bardziej intensywnych uruchomionych aplikacji w Canvas, zwłaszcza jeśli jesteś zobowiązany do opracowania aplikacji z obsługą IE 8. Czasami zdarza się, że DOM jest szybszy niż obecna implementacja Canvas API w momencie pisania tego tekstu. At przynajmniej znalazłem go podczas pracy nad niezwykle złożoną pojedynczą stroną animującą aplikację html5 i canvas dla Samsunga.

Byliśmy w stanie zrobić całkiem dobrze w poprawie wydajności rzeczy, nadal używając Canvas do wykonywania skomplikowanej pracy, aby przyciąć obrazy do kręgów, co prawdopodobnie byłoby w porządku trzymać się tego, jak to robimy.

Na Kilka dni przed premierą postanowiliśmy spróbować innej techniki, a nie tworzyć tymczasowe płótna poza ekranem, które były umieszczone na widocznym płótnie po przycięciu do kółek itp.., właśnie dodaliśmy Elementy Dom obrazu na płótnie, używając współrzędnych x i y, których wcześniej używaliśmy do umieszczania płócien temp.

Do przycinania obrazów w okręgi, cóż, to było proste, po prostu użyliśmy właściwości CSS3 border-radius, aby to zrobić, co było znacznie mniej pracy niż złożona seria zmian stanu i podczas genialne i twórcze, ale nadmierne wykorzystanie .metoda clip ().

Po umieszczeniu w DOM występuje animacja obrazów, a węzły DOM dla każdego obrazu są animowane jako osobne elementy obszaru roboczego. Te, które możemy mieć pełną kontrolę nad stylizacją off łatwo poprzez CSS.

Technika ta jest podobna do innej metody wykonywania tego typu prac, którą warto znać, która polega na nakładaniu płócien na siebie, a nie rysowaniu ich w jednym kontekście.

Oto kilka wskazówek i sugestii, które wczoraj umieściłem na liście, którą warto się podzielić.

• Nie dołączaj jQuery, chyba że musisz zrobić coś więcej niż tylko wybrać <canvas>.

  Udało mi się obejść bez niego prawie wszystko, co zrobiłem na płótnie.]}

• Tworzenie abstrakcyjnych funkcji i oddzielić kod . Oddziel funkcjonalność od wyglądu lub początkowego stanu rysowania.

  Spraw, aby wspólne funkcje były wielokrotnego użytku jako jak najbardziej. Najlepiej użyć wzorca modułu, w którym można utworzyć obiekt utils zawierający wspólne funkcje.

• Używaj jedno-i dwuliterowych nazw zmiennych, gdy ma to sens (x, y, z ).

  Układ współrzędnych w kanwie dodaje więcej pojedynczych liter, które są powszechnie deklarowane jako zmienne. Co może prowadzić do powstania wielu zmienne pojedyncze/podwójne (dX, dY, aX, aY, vX, vY ) jako część elementu.

  Proponuję piszesz albo abbr. słowo ( dirX, accelX, velX) lub być opisowe, w przeciwnym razie rzeczy mogą być dość mylące dla ciebie później, zaufaj mi.

• Utwórz funkcje konstruktora, które mogą być wywoływane w razie potrzeby do tworzenia elementów gry. Możesz dodać własne metody i właściwości w konstruktorze i utworzyć dowolną liczbę potrzebnych Ci metod, a wszystkie będą miały swoje własne właściwości i metody.

  Przykład funkcji konstruktora kuli I wykonane:

  // Ball constructor
  var Ball = function(x, y) {
      this.x = x;
      this.y = y;
  
      this.radius = 10;
      this.color = '#fff';
  
      // Direction and min, max x,y
      this.dX = 15;
      this.dY = -15;
  
      this.minX = this.minY = 20 + this.radius;
      this.maxX = this.radius - (canvasWidth - 20);
      this.maxY = this.radius + canvasHeight;
  
      this.draw = function(ctx) {
          ctx.beginPath();
              ctx.arc(this.x, this.y, this.radius, 0, twoPI, true);
          ctx.closePath();
          ctx.save();
              ctx.fillStyle = this.color;
              ctx.fill();
          ctx.restore();
      };
  };
  

Tworzenie piłki

ball = new Ball(centerX, canvasHeight - paddle.height - 30);
ball.draw(ctx);

• Dobrą bazą do pracy jest stworzenie 3 funkcji: init () - wykonuje całą początkową pracę i ustawia podstawowe var-y i programy obsługi zdarzeń itp... draw () - wywoływane jednorazowo, aby rozpocząć grę i rysuje pierwszą klatkę gry, w tym tworzenie elementów, które mogą się zmieniać lub wymagać zbudowania. update() - wywołana na końcu Draw () i wewnątrz siebie poprzez requestAnimFrame. Aktualizuje właściwości zmieniając elementy, Rób tylko to, co musisz zrobić tutaj.

• Wykonaj jak najmniej pracy w pętli, dokonując aktualizacji zmieniających się części lub elementów. Tworzenie elementów gry wykonaj inne działania interfejsu poza pętlą animacji.

  Pętla animacji jest często funkcją rekurencyjną, co oznacza, że wywołuje się szybko i wielokrotnie podczas animacji, aby narysować każdą klatkę.

  Jeśli jest wiele elementów animowanych jednocześnie, możesz najpierw utworzyć elementy używające funkcji konstruktora, jeśli jeszcze nie, a następnie w konstruktorze tworzą metodę 'timer', która ma requestAnimFrame / setTimeout używając go tak, jak normalnie w dowolnej pętli animacji, ale powoduje tylko ten element.

  Każdy element gry może mieć własne metody timer, draw i animate w konstruktorze.

  Daje to pełną separację sterowania dla każdego elementu i jedna duża pętla animacji nie będzie konieczne w ogóle, ponieważ pętla jest podzielona na każdy element i uruchamiasz / zatrzymujesz się do woli.

Lub inna opcja:

• Utwórz funkcję konstruktora Timer () , której możesz użyć i nadać każdy element animacji indywidualnie, minimalizując w ten sposób obciążenie pracy w pętlach animacji