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

};

有没有办法实现这个目标？

我也是Javascript的新手，所以如果可以，请尽可能多地解释。

由于

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

Modified fiddle here

可选地，不要重置翻译，而是直接使用它作为delta值，而不是现在的绝对delta。

您也可以直接在坐标上添加delta值，但这比使用translate方法要慢。希望这会有所帮助。

Answer 2

如果你的形状没有改变，你绝对不应该每帧都重绘它。而是将形状绘制一次到缓冲画布，然后在该位置使用drawImage来为形状设置动画。

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

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

如果这没有意义，请告诉我，我可以扩展。

在html5画布中动画自定义形状

2 个答案:

Modified fiddle here