动效的效果是头部、耳朵、麦克风和手臂都在运动的摇摆效果。这不能传输到视频。大体图如下所示。接近前端的css很难实现这种动效，所以决定使用Lottie来实现。后来才知道产品希望小猴子的脸是孩子的头像，于是修改了Lottie的json文件，将动画中的头像换成自己的，但是效果如下。一个属性的作用是找一个tm（clippingpath）属性，但是只提到了这个属性，不知道怎么用。看里面的json结构，实现裁剪效果真的很费解。我只能另辟蹊径。有什么办法可以把头像变成圆形吗？返回后端处理的圆形头像到前端裁剪头像，然后替换后端处理是不现实的。需要后台实现，会占用服务器处理。前端处理，突然想到之前用canvas生成海报图片，那么可以画圆形图片吗？我搜索了一下，果然大喜过望。关键是clip()API。该API可以使用您指定的形状来裁剪画布的一部分。然后，您在画布上的操作将只在形状区域可见。其他地方还有操作，可以使用restore()接口恢复，但是在使用clip接口之前必须先使用save()接口保存画布的状态。实现圆角方案的核心代码如下canvas的使用之路总是曲折的，就在你准备跑起来看效果的时候，会提示Cannotreadproperty'getContext'ofnull”大意是canvas无法获取getContext属性，所以只能在html加载完成后执行js代码，写在window.onload中。绘制完成后需要将canvas转为图片，canvas.toDataURL("image/png")不过是一口老血...控制台是红色的，**UncaughtDOMExc****eption:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvassmaynotbeexported.**谷歌发现受CORS策略限制，会出现跨域问题。图片虽然可以使用（比如附加到页面），但是绘制到画布上会污染画布。一旦画布被污染，画布的数据将无法提取。例如canvas的toBlob()、toDataURL()、getImageData()等方法不能使用；使用这些方法会抛出安全错误这个很简单，给图片加上crossOrigin属性，img.setAttribute("crossOrigin",'Anonymous')然后把demo迁移到项目中运行，哎，为什么不能't我找别的图片路径，多页服务，根路径好像是对的总不能把图片全部上传到oss，换成网上的图片吧？这样维护起来比较费力。前端的魅力是无穷无尽的。不能解析json文件路径，但是可以解析js路径。最后把整个json文件改成js。里面的图片用require导入，最后导出，完美解决！最后的效果就实现了，爽！参考文章：https://www.jianshu.com/p/9a6...
