javascript - 如何在 HTML5 Canvas 中设置多边形大小的动画？

Question

我用以下代码绘制了一个多边形。现在我想动画地调整多边形的大小。详细地说，我想在多边形的一侧设置 Angular 移动，使其形成弧形，从而改变多边形的大小。我用谷歌搜索了有关多边形动画的所有内容，但没有得到任何东西，尽管有很多线动画的 Material 。

<script>
    $(function(){
    var c=$('#myCanvas');
    var ctx=c.getContext("2d");
    ctx.fillStyle='#f00';
    ctx.beginPath();
    ctx.moveTo(0,40);
    ctx.lineTo(80,200);
    ctx.lineTo(100,200);
    ctx.lineTo(40,0);
    ctx.closePath();
    ctx.fill();
</script>
</div>

是否可以选择多边形的一条线并对其进行动画处理，以改变多边形的形状？

Answer 1

诀窍是将多边形的坐标存储在一个数组中，然后处理该数组中的数字。

然后将数组中的内容渲染到 Canvas 上。无需担心翻译和您有什么问题。

将 Canvas 视为当前数组中所有内容的快照。