首页 > 微站云课堂 > 运动类跑步小程序柱形(圆角)

运动类跑步小程序柱形(圆角)

2019-09-26 21:52:02       资讯>微站云课堂>微站云 阅190

微站云 2019-09-26

      最近公司接了一个跑步类的小程序,其中有一个功能需求是画一个用户跑步数据展示为柱形图,开始以为很简单,就是过去的拿来主义,在网上没有类似的图,也没找到类似的代码。那只能自己研究,整整花了3天时间。最终得以解决,分享出来供大家参考。



要点介绍:


1.柱形图顶部是圆形,或者说半圆形

2.文字显示在柱形上

3.文字方向跟柱形底部对齐

4.柱形下面显示日期

5.柱形背景颜色

6.柱形图需要可以左右滚动


制作需要哪些组件:

1.在开发工具中新建一个小程序组件

2.使用canvas 的 arc(), fillRect(), context.translate(0, startPoint.y);   context.rotate(90 * Math.PI / 180); /***旋转90度 */

注意事项:

1.理解路径开始与路径结束等使用,不然画出来的图肯定出乎你的意料


小程序开发找我, 我的微信18910276806 


 如果你觉得本文章节省了你的开发时间,让你少加班,让你能更早的回家陪女友或者打游戏,能让你更快速的挣到钱,那么请支持我1元钱!如需获得更多有效帮助请加我微信18910276806,如未及时通过系我工作繁忙,敬请谅解。


阅读:190
微站云小程序开发热线:18910276806