在html5畫布中設置自定義形狀的動畫

Question

我是html5中的畫布新手，想知道如何為具有許多坐標的自定義形狀設置動畫。 我在網上搜索，但沒有結果。 我只看到圓形或正方形的結果。

這是一個隨機繪圖的示例。 我希望它在屏幕上移動而不設置每個點的坐標。 http://jsfiddle.net/ZJdus/

var drawing = function(){
// rand drawing drawing
  context.strokeStyle = "red";
    context.beginPath();
    context.moveTo(318, 200);
    context.lineTo(183, 87);
    context.lineTo(446, 125);
    context.lineTo(446, 202);
    context.lineTo(383, 236);
    context.lineTo(318, 202);
    context.lineTo(318, 125);
    context.lineTo(446, 125);
    context.lineTo(183, 236);
    context.lineTo(318, 125);
    context.lineTo(383, 187);
    context.lineTo(383, 125);
    context.lineTo(613, 180);
    context.lineTo(446,400);
    context.lineTo(413, 180);
    context.lineTo(350, 180);
    context.lineTo(318, 202);
    context.lineTo(350, 180);
    context.lineTo(183, 125);
    context.stroke();

};

有沒有辦法做到這一點？

我對Java語言也很陌生，因此請盡可能解釋。

謝謝

Answer 1

您可以在重新繪制形狀之前使用translate() ：

/// clear canvas before each redraw
context.clearRect(0, 0, context.canvas.width, context.canvas.height);

/// translate canvas (move origin)
context.translate(deltaX, deltaY);

... draw points here...

/// reset translate (faster than save()/restore())
context.translate(-deltaX, -deltaY);

在這里修飾小提琴

（可選）無需重置轉換，只需直接將其用作增量值即可，而不是像現在這樣使用絕對增量。

您也可以將增量值直接添加到坐標上，但這比使用轉換方法要慢。 希望這可以幫助。

Answer 2

如果您的形狀不變，則絕對不要在每一幀都重新繪制它。 而是一次將形狀繪制到緩沖畫布上，然后在該位置使用drawImage對其進行動畫處理。

var drawing = //same as your code above only context is a buffer canvas...

contextOfDisplayedCanvas.drawImage(canvasWithShape, shape.x, shape.y);

讓我知道那是否沒有道理，我可以擴大。