我有一些 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>
最佳答案
显然，您的代码正在为每个 draw 调用创建一个新的 canvas 实体，这没有意义。
您应该创建 Canvas 仅一次，然后在draw 调用中在其上绘图。如果您需要清除前一帧，您只需重置 width/height 属性或调用 clearRect。
关于javascript - 避免创建 Canvas 造成的 Javascript 内存泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47405991/