微信小程序canvas画价格走势图（一）

今天是周二，今天来开一个新坑吧。最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图，现在来分享一下经验。

因为内容比较多，所以打算这次分为多篇博客来写，这样一篇博客的内容就会更少、更清晰。下一篇博客也不用等到下周二才来发布。

OK，今天第一篇谈的主要是目标和效果图，以及我对这个需求一开始提出的疑问，还有完成这个需求的大致步骤，具体每个步骤的细节就留到后面几篇再来说，最后一篇会贴上完整的代码。如果有遇到类似需求或者想学习这个代码的小伙伴可以关注一下我，这一篇只是抛砖引玉。

一、目标和效果图

首先来看看，这个需求的目标。

UI设计图上多了这个图，旁边还有一个草图，我觉得客户的需求就是要在给出一个这样的价格曲线、日期和走势的情况下，显示出对应的价格走势图。

我做出来的最终效果是这样的：

可以看出，大致的效果得到了还原，虽然不能做到100%还原，但是已经可以通过给定的数据调用函数来生成对应的图了。做的过程中我没有使用任何框架（本来如果用uni-app做小程序的话，我是可以使用uchart来绘图的），只是用微信小程序的canvas来自己画图，可以说效果比较朴素而粗糙。

二、我对这个需求的疑问

一开始我也不是很确定是否真的要用canvas绘图，然后我问了我同事，他们讨论后，得到的结论是，虽然每个商品的数据不同，但是客户并不打算准备好对应的图来上传，只是给出数据，要显示出对应的走势图。那就只能用canvas了。

说实话，我之前虽然学过canvas，但是我基础很差，对它没什么好感，觉得不够灵活，画起来难度大，只知道它很适合画图表之类东西，也能被大佬画出很神奇的东西。但现在是得使用它了，我得靠着之前的基础和查阅文档来完成。

所以我提出了这样的几个疑问，我就是从这些疑问出发，去找了资料，才能开始做这个东西的——1.如何用canvas画折线图？2.微信小程序的布局，我使用的单位一直是rpx，但是canvas里面绘图用的单位是px，要怎么转换这两个单位呢？3.微信小程序使用canvas绘图与在H5中使用canvas有什么不同呢？4.用canvas画圆，画直线很简单，胶囊形要怎么画？5.canvas要怎么绘制阴影？6.canvas怎么知道一段文字写出来有多宽呢？怎样保证文字水平居中？

以上的每个问题后来我都找到了答案，把这些问题展开，一点一点解决，最终形成了这个作品。

三、实现的大致步骤

现在来简单谈谈实现这个效果的大致步骤。

1. 首先当然是准备好对应的容器<view>和<canvas>，还有这里的背景图（坐标轴的图片）。把背景图定位到下层，上层放的是未脱离标准流的<canvas>。

2. 准备好数据。这里的数据包括展示在图上的价格、人数、日期等数据，还有色调，canvas大小。

3. 使用数据，绘制出最基本的折线图。里面拐点坐标的计算是个难点。

4. 画好折线图后，就知道了拐点坐标。现在就在拐点的位置这里画上带阴影的小圆点。

5. 把小圆点对应的的拼团人数、价格数据写到旁边。

6. 注意把特殊情况特殊处理好，特殊情况的圆点更大，价格文字的样式也更复杂。

7. 画好折线图下方的刻度，写好对应刻度日期。

8.把原价和箭头图片放到画布上的适当位置。

9. 优化，把以上代码抽出主函数，按功能分割，有需要时被主函数调用。

好了，整体的思路可以这么划分。具体的实现过程、遇到的问题和解决方案就留到后面的博客来讲了。下一篇不出意外的话，是讲基本的折线图的绘制，会提到我认为微信小程序使用canvas需要注意的地方。