于是我个人理解到 , 在开发canvas动画时 , 一个较好的习惯就是 , 在beginPath之前先ctx.save();保存画笔状态 , 在closePath后ctx.restore();恢复之前的画笔状态 , 这样我们的每一个绘制阶段对于画笔的修改都将是不会有影响的.( 个人经验 )

代码中这部分是指 我们绘制的文字new 与 橘色三角形区域的重叠关系 , 此方法取值较多 , 此处不做过多介绍 , source-atop值可以使重叠区域保留 , 新绘制的内容在重叠区域以外的部分消失 , 以此达到new在里面的效果

到这里我们就开发好了翻角效果的完全展示的状态 , 那么如何让这个区域动起来呢?

此处需要使用h5提供的用于刷帧的函数 requestAnimationFrame ;

此方法可简单理解为 16毫秒的定时器 , 但是厉害的是可以再各个环境中自动匹配到可达到的相对顺畅的帧率 , 实际并不是定时器哈~

我们需要在这个循环执行的函数中 , 将上述的绘制内容重复绘制 , 例如 :

//...

}

这样我们就可以达到刷帧的效果了 , 于是接着我们要做的就是控制绘制时各个数值的参数.

比如我们是以 (50,0)为起点 , ( 100 , 50 )为终点这样的两个移动点为绘制标记的 , 如果我们将两个点进行存储 , 并且每次执行drawMethod的时候更新点的位置 , 然后清空canvas ,再绘制新的点 那么就可以达到canvas动起来的目的了;

实际效果链接在这里

在上面的demo链接中 , 自己定义了一个速度与加速度的关系 , 比如每次绘制一次canvas后 , 将存储的点坐标进行增加一个speed值 , 然后speed值也增加 , 这样speed对应的概念就是速度 , 而speed的增加值对应的就是加速度. 所以就呈现了一种加速运动的状态;

以上内容纯属个人理解内容 , 若果有哪里理解错了 欢迎各位大大指点 , 另demo链接失效可私信.