我正在尝试将多个 Canvas 层添加到 DOM 中，并且发现虽然添加许多层不是问题，但如果我使用 .fillText 将内容添加到层中，我突然会使用大量内存，通常是火狐崩溃并导致整个机器瘫痪。如果有人发现我正在以错误的方式做某事，我将不胜感激您提供的任何建议 - 谢谢!
下面的代码 - 这是实际情况的简化版本，但演示了问题 - 如果我增加循环运行的次数，我很快就会遇到问题。但是，如果我注释掉 .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>
最佳答案
FillText 使用大量内存来显示，因为它是基于矢量的绘图。 (如果您打算始终显示相同的文本，我建议使用图像)
我还要补充一点，您正在创建具有相当高分辨率的多个 Canvas ，这对您的机器来说可能很困难。
关于javascript - 多个 Canvas 层内存泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20468454/