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只更新＆＃34;根据需要＆＃34;，但我在这里绘制画布，而不是div。指针赞赏。

Answer 1

一般解决方案是：

你确定要使用canvas（而不是svg，webgl，服务器图像生成......）？
尽可能减少画布尺寸（减少像素数=减少工作量）
处理'diff'自己为画布
使用分层

有关详细信息，请参阅此优秀文章：http://www.html5rocks.com/en/tutorials/canvas/performance/

更高性能的画布绘制代码？

1 个答案: