如何在html canvas中实现动圈图片

Question

我有一组方形图像可以呈现为在 html 画布中四处移动并相互弹跳的圆圈。

对于我的每张照片，我都会执行以下操作：

context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true);
context.closePath();
context.drawImage(images[i], ball.x - ball.radius + 2, ball.y - ball.radius + 2, ball.radius * 2 - 3, ball.radius * 2 - 3)
context.clip() // breaks

当我添加

clip()

时，它就坏了。不确定我做错了什么，也许我对剪辑的理解完全错误。

这是我的代码笔：https://codepen.io/althea16/pen/GRXMmOw 请参阅渲染方法第 80 - 84 行。