网上有很多其他语言平台版本的网络爬虫，比如Python，Java。那怎么能少得了我们无所不能的javascript呢😂？这个和之前给产品狗开发的批量图片下载配置工具，原理很相似，核心就是调用Node的http模块。

网络爬虫基本就由如下部分组成：

1. 程序入口

2. 请求模块

3. 数据解释

之前给客户开发一个简单的后台管理系统，本来准备套用AdminLTE的，但客户嫌弃太臃肿，而且又需要有多tab页面切换，于是从我代码库中找到好久前就写过的管理后台，根据需求重写。这是基于jQuery，加上自己编写基础样式，从零搭建起来的框架，在这个轻量级模版的基础上进行开发vue项目。现在顺便将这个模版搭建成我的前端demo的管理系统，而这篇文章就讲述下如何实现简单的后台管理系统。

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

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

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

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

本节效果请看：散点气泡图http://ufcjd3.coding-pages.com/dist/chartpoint.html

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

效果请看：饼图http://ufcjd3.coding-pages.com/dist/chartpie.html

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

效果请看：折线图http://ufcjd3.coding-pages.com/dist/chartline.html

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

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

效果请看：柱状图http://ufcjd3.coding-pages.com/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. 圆形、椭圆