好在这个排版不是很复杂，所以我们思考了一下决定通过canvas去生成一张图片再得到对应的图片Url。 具体的实现思路就是在详情页请求数据时就直接执行canvas绘制的相关代码。在分享之前这张图就早早的绘制完成了，缺点就是不管分享与否都会执行这操作，优点是不依赖后端且节约资源。 …

需要注意的是，目前的canvas可以简单分为两种。一种是传统网页中的canvas，一种是小程序中的canvas。两者的功能是完全一样的。只是标签的样式，和 api 略有区别而已。目前我们主要讲解小程序中的canvas。 经过以上的演示我们也发现，线条的颜色一直是黑色，这肯定是无…

这周接到一个这样的坑爹需求，小程序需要实现一个图片分享的功能。让用户可以把图片发送到朋友圈或者其他渠道。 刚开始拿到这个需求，觉得还好，没有太大的感觉, 第一个感觉想把锅甩给后端，调用一个接口让后端传回来一个URL，前端只负责显示就好。^_^  当然这么天真的想法基本上不…

从基本概念到一个一个小demo去熟悉api,到基本柱状图和基本折线图的实现，去熟练整个过程，如果你是小白，相信看完你会有所收获，如果你是大神请不要看。。。

社区里有一群canvas爱好者，比jsh5css，安静的小智，jeffer等同学他们在canvas方面都有着自己的学习心得和见解。但是极乐叔发现在小程序开发学习过程中还是有很多小伙伴折戟在canvas上，为此我们在社区首页教程内专门开了一个canvas学习栏目，但是觉得仍然不够…

最近做的一个需求，场景之一是绘制一个雷达图，找了一圈，似乎 AntV 下的 F2 很适合拿来主义： 但是接着又考虑了一下，我当前所做的项目并不是可视化项目，今后大概率也不会有这种可视化图表的需求，只是

依然是这个简单的项目。 由于使用JS+CSS不能实现圆角的效果（如下图，主要使用到了CSS3的transform属性），所以特地研究了一下怎么使用canvas来100%复原设计稿。 第一眼看到canvas相关的API文档时，感觉有点头大：东西实在太多了，想要一下子学会似乎问题不…

分析整个水球图，波形的绘制就是整个绘制过程的最大的难点。绘制波形，第一个难点就是波纹的形状，其实可以选择两种方案绘制，第一种，采取圆弧拼接的形式；第二种就是采用三次贝塞尔曲线来绘制曲线。为了再次熟悉三次贝塞尔曲线的绘制过程，所以采用了方式二。波形的绘制难点二就是如何使得波形绘制…

在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。 一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。 没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际…