避免创建画布的 Javascript 内存泄漏答案

【问题标题】：Avoiding Javascript Memory Leaks from the Creation of Canvas避免创建画布的 Javascript 内存泄漏
【发布时间】：2017-11-21 05:43:30
【问题描述】：

我有一些HTML 和Javascript 代码在页面中绘制一个二维canvas。在任务管理器中，我可以看到内存迅速增加，直到网页冻结。

请告诉我如何防止内存泄漏或提供一些替代代码，以便在浏览器上绘制 canvas 而不会造成此类泄漏。

function setup() {
  // insert setup code here
}

function draw() {
    // insert drawing code here
    var canvas = document.createElement('canvas');
    canvas.id     = "CursorLayer";
    canvas.width  = 1224;
    canvas.height = 600;
    canvas.style.zIndex   = 8;
    canvas.style.position = "absolute";
    canvas.style.border   = "1px solid";

    document.body.appendChild(canvas);
 
    var c2 = canvas.getContext('2d');
 
    var centerX=canvas.width/2-100;
    var centerY=canvas.height/2-100;
 
    c2.fillStyle = '#696969';
    c2.beginPath();
    c2.moveTo(centerX, centerY);
    c2.lineTo(centerX+200,centerY);
    c2.lineTo(centerX+200, centerY+200);
    c2.lineTo(centerX, centerY+200);
    c2.closePath();
    c2.fill();

    // adding source location

    var ctx = canvas.getContext("2d");
    ctx.fillStyle = '#008000';

    ctx.beginPath();
    ctx.arc( 20, canvas.height-20, 10, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

    // adding destination location
  	
    var ctx1 = canvas.getContext("2d");
    ctx1.fillStyle = '#f00';

    ctx1.beginPath();
    ctx1.arc( canvas.width-20, 20, 10, 0, 2 * Math.PI);
    ctx1.stroke();
    ctx1.closePath();
    ctx1.fill();
}

<!DOCTYPE html>
<html>
    <head>
	<title>Robot Path Planning</title>
            <style>
	        body {
		    padding: 0;
                    margin: 0;
		}
	    </style>
	    <script src="../p5.min.js"></script>
	    <script src="../addons/p5.dom.min.js"></script>
	    <script src="../addons/p5.sound.min.js"></script>
	    <script src="sketch.js"></script>
        </head>
    <body>
    </body>
</html>

Browser Memory consumption

【问题讨论】：

代码中没有任何内容显示内存泄漏。内存泄漏非常罕见，内存消耗过多的可能原因是您的代码分配了过多的内存，例如创建了太多的画布。我会问在创建新画布时调用draw 函数的频率。如果 draw 被多次调用（可能是动画的一部分），您应该在 draw 函数之外创建画布，而不是在其中。
您的脚本是 p5 草图。你为什么还要使用 Context2d 方法？请改用 p5 语法。 p5js.org/get-started/#sketch

标签： javascript html canvas memory-leaks

【解决方案1】：

显然您的代码正在为每个 draw 调用创建一个新的 canvas 实体，这没有任何意义。

您应该只创建一次画布，然后在draw 调用中对其进行绘图。如果您需要清除前一帧，您可以重置width/height 属性或调用clearRect。

【讨论】：