javascript - Canvas5绘制多条线的性能问题

Question

我目前正在使用 Canvas 和 JavaScript 创建游戏，当我尝试绘制许多线条时遇到性能问题。

用户能够将导弹“发射”到单击鼠标的坐标，以试图摧毁迎面而来的 meteor ，并且我希望 Canvas 逐步绘制从“炮塔”到用户单击的位置的线。

这是监听点击并绘制用户点击位置的线的函数

canvas.addEventListener('click', function() {

// uses the function getMousePos to get coords
var mousePos = getMousePos(canvas, event);
var endX = mousePos.x;
var endY = mousePos.y;

var amount = 0;
var startX = w/2;
var startY = h; 

// draw the line from turret
setInterval(function() {
    amount += 0.005;
    if (amount > 1) amount = 1;
    ctx.strokeStyle = 'black';
    ctx.moveTo(startX, startY);

    ctx.lineTo(startX + (endX - startX) * amount,
            startY + (endY - startY) * amount);

    ctx.stroke();
}, 20);
})

https://jsfiddle.net/oohyefwa/

在我绘制 10 条左右的线条后， Canvas 变得非常滞后，对于游戏来说是 Not Acceptable 。

是否有更有效的方法来完成我想做的事情？

Answer 1

将 beginPath() 添加到绘制循环中。否则，线条将会累积，所有内容都将一遍又一遍地重新绘制，最终拖慢浏览器的速度。

示例

setInterval(function() {
    ctx.beginPath();    // <----

    amount += 0.005;
    if (amount > 1) amount = 1;
    ctx.strokeStyle = 'black';
    ctx.moveTo(startX, startY);

    ctx.lineTo(startX + (endX - startX) * amount,
            startY + (endY - startY) * amount);

    ctx.stroke();
}, 20);
})