Question

我目前正在使用canvas和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); })

Canvas5性能问题绘制多行

1 个答案: