重绘 HTML5 画布非常慢

Question

我刚开始玩 HTML5 画布，希望能用它制作几款游戏。然而，当我开始向它渲染鼠标坐标时，它几乎停止了：

http://jsfiddle.net/mnpenner/zHpgV/

我所做的只是渲染 38 行和一些文本，它应该能够处理，不是吗？

我做错了吗？我希望能够以至少 30 FPS 的速度进行渲染，但对于这样的事情，我希望它能够绘制 1000 次。

或者我只是在工作中使用了错误的工具？ WebGL 能胜任这项任务吗？为什么一个会比另一个慢这么多？

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function(m, n) {
        return args[n];
    });
};
var $canvas = $('#canvas');
var c = $canvas[0].getContext('2d');
var scale = 20;
var xMult = $canvas.width() / scale;
var yMult = $canvas.height() / scale;
var mouseX = 0;
var mouseY = 0;
c.scale(xMult, yMult);
c.lineWidth = 1 / scale;
c.font = '1pt Calibri';

function render() {
    c.fillStyle = '#dcb25c';
    c.fillRect(0, 0, scale, scale);
    c.fillStyle = '#544423';
    c.lineCap = 'square';
    for (var i = 0; i <= 19; ++i) {
        var j = 0.5 + i;
        c.moveTo(j, 0.5);
        c.lineTo(j, 19.5);
        c.stroke();
        c.moveTo(0.5, j);
        c.lineTo(19.5, j);
        c.stroke();
    }
    c.fillStyle = '#ffffff';
    c.fillText('{0}, {1}'.format(mouseX, mouseY), 0.5, 1.5);
}
render();
$canvas.mousemove(function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    render();
});

<canvas id="canvas" width="570" height="570"></canvas>

Answer 1

这里的代码变得更好了。

http://jsfiddle.net/zHpgV/3/

以下是我更改后您应该考虑的事项的细分：

• 继续添加到路径而不是停止并使用beginPath 创建新路径。这是迄今为止最大的性能杀手。您最终会得到一条包含成千上万条永远不会被清除的线段的路径。
• 在初始化时只需要创建一次就不断地创建相同的路径。也就是说，您唯一需要在render 内部调用的是stroke。您无需再拨打lineTo/moveTo，当然也不必连续​​拨打。见注 1。
• 为一条路径抚摸两次
• 在 for 循环中抚摸
• 重绘背景而不是设置 CSS 背景
• 反复设置线路上限

注意 1： 如果您计划在应用程序中拥有多个路径，那么您可能应该缓存这样的路径，因为它们永远不会改变。我有一个关于如何做到这一点的教程here。

当然，如果您这样做只是为了制作背景，则应该将其保存为 png，并且您应该使用 CSS 背景图像。

像这样：http://jsfiddle.net/zHpgV/4/

然后你的渲染程序突然变得相当小：

function render() {
    c.clearRect(0, 0, scale, scale);
    c.fillText('{0}, {1}'.format(mouseX, mouseY), 0.5, 1.5);
}

Answer 2

正如我在 cmets 中所说，我对这段代码的缓慢感到惊讶，因为我用非常快的动画绘制了更复杂的东西，甚至没有考虑双缓冲。

于是又看了看，果然发现了一个bug。

主要问题是绘制路径的堆积。

每次绘制一条路径时添加c.beginPath();。

这是一个fast rendering of the same thing，以证明它现在成功了。

画布绘制速度快，可用于动画。

Answer 3

您不必在每个动画帧中绘制整个网格。将它放在另一个底层画布上（通常称它们为“层”，但它们只是单独的画布元素），因此您只能重绘坐标。

<div id="canv">
 <canvas id="bgLayer" width="500" height="500" style="z-index: 0"></canvas>
 <canvas id="fgLayer"  width="500" height="500" style="z-index: 1"></canvas>
</div>

这里是the example 我一直在玩分层画布。表格绘制在底部画布上，球绘制在顶部画布上。它只是一个游乐场，因此有很多需要修复和优化的地方，例如在另一个隐藏的画布上只绘制每个球一次并使用getImageData/putImageData 来提高性能。

另外，建议使用requestAnimationFrame 来更新画布。相反，您的示例利用了每次鼠标移动，这比需要更频繁（当然，当鼠标移动时）。

有一个很好的article 可以提高画布性能。此外，关于这个主题还有一个很棒的SO post。