canvas 点赞机绘图重叠的问题，求教

Question

根据贝塞尔曲线计算图片绘制的位置，绘制前必须清除上一帧绘制的图片。

但是图片绘制的区域是一个方形框。如果在清除时方框区域存在其他的图片，就会出现图上的情况。怎么破？

可以只绘制一次图片然后按曲线移动位置吗？

基本实现如下

t = t + speed 
const value = getBezierValue(bezier, t)
that.ctx.clearRect(oldx, oldy, size, size); // 清除上一次绘图（问题出现在这二）
that.ctx.globalAlpha = 1 - t;
that.ctx.drawImage(img, value.xt, value.yt, size, size); // 重新绘制
oldx = value.xt, oldy = value.yt; //记录上一次绘图位置

Answer 1

你需要一个 requestAnimateFrame 函数，一个 render 渲染函数和一个全局计数器变量。
通用逻辑是：

1. 通过 requestAnimateFrame 以 60fps 的频率调用 render 函数

2. render 函数中每次对计数器加一

3. 根据计数器的值计算出各个图形所在轨迹的相应位置