Canvas5性能問題畫多條線

Question

我目前正在使用畫布和JavaScript創建游戲，嘗試繪制多條線時遇到性能問題。

用戶能夠將導彈“發射”到單擊鼠標的坐標處，以試圖消滅即將到來的流星，我希望畫布從“炮塔”到用戶單擊的位置逐漸畫線。

這是偵聽點擊並在用戶點擊處畫線的功能

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條左右的線后，畫布變得難以置信，游戲變得無法接受。

是否有更有效的方法來做我想做的事情？

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);
})