之前一直在开发移动端的单页面应用，而移动web对性能和效果要求是比较苛刻的，所以用的都是轻量级的框架体系。基本上是Zepto加自己开发的单页面框架，再加上若干简单的库。这样前端要加载的文件很小，修改起来也非常方便，同时这样的轻量级的体系使用gulp进行自动化管理也是非常合适的。

自从开发react项目后，对它的工程化和开发模式也是开了眼界，标准的框架体系就是重量级的react+redux+webpack。开发大型项目和后台管理系统用react，vue确实是不错的。但是开发一些小项目，比如前端h5之类的又有杀鸡用牛刀的感觉。

于是借鉴webpack工程化思想动手写了个前端快速开发模版，用于开发快速简洁的项目，比如之前的单页面应用。而这个项目模版就是类似前端开发的脚手架了，基本的思路就是自动化和前端编译

今天开始完成散点图，做完这一节，我的canvas图表系列就算是完成了，毕竟平时最频繁用到的就是这几类图表了：柱状，折线，饼图，散点。经过编写canvas图表项目的实践，我对canvas也做到了比较深入的理解，也是越来越喜欢计算机图形相关的知识了。接下来canvas的学习会告一段落，我会继续接着学习webGL，同时学习使用blender建立简单的3D模型。

本节效果请看：散点气泡图https://jeff_zhong.gitee.io/demo/dist/chartpoint.html

这几天把canvas图表都优化了下，动画效果更加出色了，可以说很逼近Echart了。刚刚写完的饼图，非常好的实现了既定的功能，交互的动画效果也是很棒的。

效果请看：饼图https://jeff_zhong.gitee.io/demo/dist/chartpie.html

话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那我的webGL技术就大有用处啊,可以独立开发小游戏了😂, 当然是玩笑了。但首先还是把canvas图表系列先弄完吧, 今天就弄折线图。

效果请看：折线图https://jeff_zhong.gitee.io/demo/dist/chartline.html

经过前面的学习，我们已经掌握了webGL的基础知识，也已经能够画出最基本的图形，比如点，线，三角形，矩形等。有了2D绘图的基础，现在终于可以进入精彩的3D世界了，来看一下这一节要实现的3D的效果吧。
实际效果：webGL3D场景

前几天用到了图表库，其中百度的ECharts，感觉做得最好，看它默认用的是canvas，canvas图表在处理大数据方面比svg要好。那我也用canvas来实现一个图表库吧，感觉不会太难，先实现个简单的柱状图。

效果请看：柱状图https://jeff_zhong.gitee.io/demo/dist/chartbar.html

还记得第一次看到canvas的粒子特效的时候，真的把我给惊艳到了，原来在浏览器也能做出这么棒的效果。结合《HTML5 Canvas核心技术》和网上的教程，经过半年断断续续的学习，对canvas的学习终于完结，对常用的canvas特效基本能做到信手拈来的。canvas特效请看：样例列表

众所周知，canvas是2D绘图技术，虽然可以通过坐标变换，位置计算也能做到3D的效果。但3D场景数据量毕竟比2D要高一个数量级的，纯粹用canvas的话，不管是性能和开发的复杂度会成为一个瓶颈。

这也是webGL出现的原因，解决web端3D渲染的场景。webGL会调用到GPU，处理大量重复的3D场景数据时，性能非常有优势。同时webGL是基于openGL ES 2.0， 因此它处理3D场景是非常成熟的。但为什么不直接学习three.js呢？因为本人对图形学感兴趣，只是希望做一些自己喜欢的效果的同时深入了解计算机图形学，没指望通过它做商业项目。

为了让学习更有动力和目的性，我们以实例为导向学习webGL，再从中展开到需要学习哪些知识点。这次我们来实现如下的动画，该教程参考了《WebGL编程指南》

实际效果请看：旋转的三角形

使用canvas进行开发项目，我们离不开各种线段，曲线，图形，但每次都必须用代码一步一步去实现，显得非常麻烦。有没有一种类似于PS，CAD之类的可视化工具，绘制出基本的图形，然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能，那将是多么的美妙的事啊。话不多说，我们来实现一个图形编辑器吧😂。

主要实现如下的功能：

1. 直线(实线、虚线)
2. 贝塞尔曲线(2次，3次)
3. 多边形(三角形、矩形、任意边形)
4. 多角星(3角星、4角星、5角星…)
5. 圆形、椭圆

学习canvas有一段时间了，顺便写个小项目练手，该项目用到的知识点包括：

1. ES6面向对象
2. 基本的三角函数
3. canvas部分有：坐标变换，渐变，混合模式，线条和图形的绘制。

实际效果: solar system

  在喜马拉雅，我们过着修行般简单而自律的生活。整个徒步过程中，喜马拉雅南坡以其所特有的高落差，带来的跨越四季的气候、动植物分布的多样性，以及从河谷到山巅的震撼风景固然给我带来不少视觉上的冲击，但印象更深刻的，是在路上遇见的人，人与动物、自然和睦相处，这才是旅途中最美丽的风景。

  尽管刚刚走完ABC，但EBC无疑远胜于ABC，它仍带给我一阵阵惊叹和无与伦比的震撼。在触手可及的距离内，庞大的山体，纤毫毕现的细节，给人雷霆万钧的压迫感，大自然的宏大，把人的脆弱和渺小衬托到了极致。

  在16天的行程中，跨过一座座的吊桥，穿过一条条山谷，翻过一个个垭口，看过一个个湖泊，走了很长很长的路，看过很美很美的风景。一路上从各个角度欣赏十几座世界级的山峰，美景真是应接不暇。EBC是如此的震撼，景色是如此之美，同时环境又是如此恶劣，在高海拔下，顶着严酷的低温，高强度的紫外线，高强度的徒步，这是一段天堂地狱般的征程。