Question

我正在尝试将多个画布层添加到DOM中，并且发现如果我使用.fillText将内容添加到图层时添加多个图层不是问题我突然会使用大量内存，通常是指出firefox崩溃并导致整个机器崩溃。如果那里的任何人都能看到我以错误的方式做某事，我将不胜感激任何建议 - 谢谢你！

下面的代码 - 这是真实的简化版本，但演示了问题 - 如果我增加循环运行的次数，我很快就会遇到问题。但是如果我注释掉.fillText代码，我似乎能够添加很多层，但是一旦我尝试和.fillText它们，我的内存使用就会通过屋顶....

  <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>.</title>
</head>

<body>
    <div id="canvasCont"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

    $(function () {
    var id = 1;
    var top = 100;

    for ( i = 0; i < 5; i++ ) {
        var left = 100;

        for ( a = 0; a < 5; a++ ) {

            $('#canvasCont').append(
                "<canvas width='1300px' height='1300px' style='position: absolute; border: 1px solid black;' id='canvas_" + id + "'>" +
                    "Your browser does not support canvas" +
                "</canvas>"
            );

            var context = document.getElementById( 'canvas_' + id ).getContext( '2d' );

            context.font = "10px Verdana";
            context.fillStyle = "red";
            context.fillText(
                id,
                left,
                top
            );

            left += 55;
            id++;
        }

        top = top + 55;
    }

}
});
</script>
</body>
</html>

Answer 1

FillText使用大量内存来显示，因为它是基于矢量的绘图。（我建议使用图像，如果你打算一直显示相同的文字）

我还要补充说，你正在制作具有相当高分辨率的多层画布，这对你的机器来说很难。

Answer 2

最后，我发现this library.....paperJS解决了多个画布层上多个实时数据点的性能问题。强烈推荐。

多个画布层内存泄漏

2 个答案: