html - 重绘 HTML5 Canvas 非常慢

Question

我刚开始玩 HTML5 Canvas ，我希望用它制作几款游戏。然而，一旦我开始向它渲染鼠标坐标，它就几乎停止了:

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 连续添加到路径而不是停止并创建新路径。这是迄今为止最大的性能 killer 。您最终会得到一条包含成千上万条永远不会被清除的线段的路径。
• 在只需要在初始化时制作一次的情况下，一遍又一遍地不断制作相同的路径。也就是说，您唯一需要在 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);
}