前言

使用了ESM+TS的风格来写一个类似老版本支付宝信用分的效果(会动!!!)；

一开始用的是普通的ES5+的风格来写，这两版的代码都会展示，

模块的版本增加了一些细节的考虑，有兴趣的看官可以看看

效果图及Demo

具体的效果图可以在Codesanbox上看

Codesanbox :

具体的亮点可以看README

Github:

能收获什么？

代码写了一大堆注释。

我的实现思路及编码姿势，以及一些typescript的用法

代码

版本1: 非ESM的风格

    
        
        
            
    
     点击我看随机效果
    
复制代码

版本2：已发布npm，ESM+TS的风格

Code :

总结

公司有这么个需求，而我以前没用过Canvas，只能自行爬坑。

总体来说canvas的标准使用姿势并不复杂，复杂点在于数学这块。

写这个让我温习了的高中数学，ESM模块的发布，用了rollup来打包，

很不错的一个工具，有时间我写个typescript-rollup-startkit

有不对之处请留言，会及时修复，谢谢阅读。