Более совершенный код рисования холста?

Question

При тестировании производительности мой код рисования занимает большую часть обработки. Я называю это каждый кадр, когда мне нужно рисовать.

BoardDisplay.prototype.drawCursor = function (client, context, vx, vy) { 
    context.beginPath(); 
    var size = 25; 
    context.arc(vx, vy, 0.5 * size, 0, 2 * Math.PI, false); 
    var colors = ["white", "red", "blue", "green", "purple"]; 
    context.fillStyle = colors[this.marble]; 
    context.fill(); 
    context.closePath(); 

    context.beginPath(); 
    var cursorRadius = 5; 
    context.moveTo(vx - cursorRadius, vy); 
    context.lineTo(vx + cursorRadius, vy); 
    context.moveTo(vx, vy - cursorRadius); 
    context.lineTo(vx, vy + cursorRadius); 
    context.strokeStyle = "black"; 
    context.stroke(); 
    context.closePath(); 
}; 

Я мог бы извлечь эти константы в значения на прототипе. Есть ли другой способ сделать это более результативным?

Я понимаю, что React.js обновляет только «по мере необходимости», но я рисую холст здесь, а не divs. Указатели оценили.

Answer 1

Общие решения:

• Вы уверены, что хотите использовать холст (вместо SVG, WebGL, формирования изображения сервера, ...)?
• уменьшить размер холста, если это возможно (меньше пикселей = меньше работы)
• ручка «дифференциалов» себя на холсте
• использование иерархического

Для получения более подробной информации см эту прекрасную статью: http://www.html5rocks.com/en/tutorials/canvas/performance/