我遇到一个问题，我正在尝试将一个将其自身的图形（基本形状）呈现为当前程序的当前程序移植到HTML画布中。我的问题是，在工作的硬件和家庭硬件上似乎都无法处理渲染。我的猜测是我需要进行一定程度的优化，以使其在不崩溃的情况下正常运行。尽管我不太了解，因为我的程序仅在用户单击鼠标的地方绘制小三角形。当添加更多三角形时，Firefox很难渲染，我最多只能有6000个，但似乎无法处理超过20-30个的渲染。
<html lang="uk">
<body>
<canvas id="canvas" width="1000" height="500">
Canvas not supported.
</canvas>
</body>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getcontext('2d');
var img = new Image();
img.src = 'resources/images/base.png';
ctx.drawImage(img,-130,-130);
var draw_icons = [];
canvas.addEventListener('mousedown',function()
{
draw_icons.push(new Radar(event.x,event.y));
})
function Radar (x,y)
{
this.x = x;
this.y = y;
this.draw = function () {
ctx.moveTo(this.x,this.y);
ctx.lineTo(this.x + 10,this.y);
ctx.lineTo(this.x,this.y+10);
ctx.closePath();
ctx.stroke();
}
}
function init()
{
window.requestAnimationFrame(init);
ctx.drawImage(img,-130);
draw_icons.forEach(function(o)
{
o.draw();
})
}
init();
</script>
我正在绘制的基本图像只是地球地形图的蓝色大理石图像。
我将不得不连续渲染此图像，因为最终将需要这些三角形为它的x，y目标确定路径的动画。