Поделиться опытом в навыках повышения производительности HTML5 Canvas

Комментарий: В этой статье объясняется, как использовать технологию кэша для реализации предварительного демонстрации, уменьшения повторного рисунка содержания CANV и избежать использования координат с плавающей запятой для повышения производительности холста HTML5. Заинтересованные друзья могут ссылаться на это, надеясь, что это будет полезно для всех.

Много раз мы рисуем и обновляем холст, и мы всегда сохраняем некоторое неизменное содержание для этого содержимого.

Кэш должен быть предварительно нарисован, а не каждое обновление.

Код нарисован непосредственно следующим образом:

context.font = "24px arial";

context.fillstyle = "Blue";

context.filltext («Пожалуйста, нажмите <ESC>, чтобы выйти из игры», 5,50);

requestAnimationFrame (рендеринг);

Использование методов предварительной картины кэша:

функция render (контекст) {

context.drawimage (mtext_canvas, 0, 0);

requestAnimationFrame (рендеринг);

}

Функция traittext (context) {

mtext_canvas = document.createElement ("canvas");

mtext_canvas.width = 450;

mtext_canvas.height = 54;

var m_context = mtext_canvas.getContext ("2d");

m_context.font = "24px arial";

m_context.fillstyle = "blue";

m_context.filltext («Пожалуйста, нажмите <ESC>, чтобы выйти из игры», 5,50);

}

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

for (var i = 0; i <points.length - 1; i ++) {

var p1 = точки [i];

var p2 = точки [i+1];

context.beginpath ();

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

Context.Stroke ();

}

Код с более высокой производительностью после модификации выглядит следующим образом:

context.beginpath ();

for (var i = 0; i <points.length - 1; i ++) {

var p1 = точки [i];

var p2 = точки [i+1];

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

}

Context.Stroke ();

Избегайте частого переключения ненужных состояний рисунка холста. Пример часто переключения стиля рисунка заключается в следующем:

var Gap = 10;

для (var i = 0; i <10; i ++) {

context.fillstyle = (i % 2? "Blue": "Red");

Context.FillRect (0, I * GAP, 400, GAP);

}

Избегайте частого переключения состояний чертежа, и лучший код рисования производительности заключается в следующем:

// даже

context.fillstyle = "red";

для (var i = 0; i <5; i ++) {

Context.FillRect (0, (i * 2) * GAP, 400, GAP);

}

// странный

context.fillstyle = "Blue";

для (var i = 0; i <5; i ++) {

Context.FillRect (0, (i * 2+1) * GAP, 400, GAP);

}

При рисовании только нарисуйте области, которые необходимо обновить, и избегайте ненужного дублированного рисунка и дополнительных накладных расходов в любое время. Для сложного рисования сцены используется иерархическая технология рисования, которая разделена на передний и фоновый рисунок. Определите слой холста

HTML выглядит следующим образом:

<Canvas>

</canvas>

<Canvas>

<pran> </canvas>

</Span>

Если нет необходимости, постарайтесь избегать рисования, таких как тени, размытые и т. Д.

Избегайте использования координат с плавающей запятой

При рисовании графика целые числа должны быть выбраны вместо чисел с плавающей точкой. Причина в том, что Canvas поддерживает полупиксельный рисунок для реализации алгоритма интерполяции, основанного на десятичных значениях для достижения эффекта с анти-альцами на рисовании изображений. Если в этом нет необходимости, не выбирайте значения с плавающей точкой.

Очистите содержание чертежа на холсте:

context.clearrect (0, 0, canvas.width, canvas.height)

Но на самом деле, есть также хакерский метод на холсте:

canvas.width = canvas.width;

Это также может достичь влияния очистки контента на холсте, но он не может быть поддержан в некоторых браузерах.