0
私は、HTMLとJavascriptというコードを2D canvasをページ内に描画しています。タスクマネージャでは、Webページがフリーズするまでメモリが急速に増加しているのがわかります。キャンバスの作成からのJavascriptメモリリークの回避
私はメモリリークを防ぐ方法を教えてください。または、そのようなリークを発生させずにブラウザに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
\t
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>
\t <title>Robot Path Planning</title>
<style>
\t body {
\t \t padding: 0;
margin: 0;
\t \t }
\t </style>
\t <script src="../p5.min.js"></script>
\t <script src="../addons/p5.dom.min.js"></script>
\t <script src="../addons/p5.sound.min.js"></script>
\t <script src="sketch.js"></script>
</head>
<body>
</body>
</html>
メモリリークを示すコードには何もありません。メモリリークは非常にまれです。過剰なメモリ消費の原因は、あまりにも多くのキャンバスを作成するなど、あまりにも多くのメモリを割り当てることです。私はそれが新しいキャンバスを作成するので、 'draw'関数がどれほど頻繁に呼び出されるのか聞いてきました。 drawが何度も（アニメーションの一部として）呼び出された場合は、draw関数の内部ではなく、描画関数の外に一旦キャンバスを作成する必要があります。 – Blindman67
あなたのスクリプトはp5スケッチです。なぜContext2dメソッドを使用するのですか？代わりにp5構文を使用してください。 https://p5js.org/get-started/#sketch – Kaiido