`canvas`破苍穹

（一）陨落的天才

“canvas之力，三段！"

望着浏览器上暗淡无光的一段话，少年面无表情，唇角有着一抹自嘲（别问我怎么一边面无表情一般自嘲，我不知道）。

”xcharts，canvas之力，三段！级别：低级！“浏览器旁，一位中年程序员，看了眼控制台打印的语句，语气漠然地将之公布了出来。

秃头男（等等！刚刚不还只是中年程序员吗？）话刚刚脱口，便不出意外的在人头（？）汹涌的的机房带起一阵嘲讽的骚动。

”三段？嘿嘿，果然不出我所料，这个‘天才’还是只会context.arc!“

”哎，这废物真是把我们charts界的脸都丢光了。“

”真不知道Echarts大人从哪儿捡回来这么个废物!“

”曾经他学console时进步多么神速啊，如今怎会愚笨至此！“

xcharts缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸子木然从那些嘲讽的同龄人身上扫过，嘴角的自嘲,似乎更加苦涩了。

”这些人，都如此刻薄势力吗？或许是因为之前我会console.group，而他们只会console.log时对我曾经崇拜过，谦卑过，所以，如今想要讨还回去吧。“苦涩地一笑，xcharts落寞地转身，安静地出了机房，孤单的身影与后方熙熙攘攘的人群如相隔两端。

第一章后续自己脑补哈，就不水字数了。

(二) cavnas大陆

夜色漆黑，只有显示器和RGB灯条发出了一些光亮。

xcharts孤独地坐在电竞椅上，凝望着《计算机图形学》，想着这么久了还是看不懂，感到一阵沮丧，又想起下午他们的嘲讽，不禁有些恍惚：”十年了“。

在xcharts的心中，有一个仅有他自己知道的秘密，他并不是这个世界的人，或者说，他的灵魂不是这个世界的人，他来自一个叫地球的蔚蓝星球，是一个php程序员，他也不知道为什么会发生这样奇怪的事,反正不管怎么样，他来了，并且回不去了。

他穿越过来时变成了一个婴儿，还是被人遗弃的那种，是Echarts大人碰巧遇见将他带回来的。随着年龄的增长，对这个世界，也有了模糊的了解。

这个世界叫做canvas大陆，大陆上没有php，也没有c，虽然有javascript，但它只是为canvas服务的，canvas，才是大陆的唯一主调！

在这片大陆上，canvas的修炼，在无数代人的努力下，几乎已经发展到了巅峰的地步，而随着移动端浏览器的统一，几乎所有人都会学习canvas。不管什么应用，都能用canvas写出来。

随着canvas的发展，根据作用的不同，分出了好几条主要的分支，它们是：

游戏引擎
可视化
其它应用

而所有分支又分为3d和2d。其下不知道有多少更细分的分支。canvas之力就是修习的成果。但是不管怎么样，canvas之力评判的标准是一样的，完成更多的功能，更酷炫的效果，更少的内存占用和更快运行效率。

xcharts因为前世在培训班学php时用过一点js，所以初来时在js方面一枝独秀，但到使用canvas时，没有学过设计模式、数据结构与算法、计算机图形学的他只会根据api完成简单的功能，对如何实现复杂的应用根本无从下手——而这些东西，在其他人的脑海里与生俱来，他不敢让外人知道自己的与众不同。所以这些年来才会从天才堕落成废物！

”再过半个月就是年终考核了，届时canvas之力还没达到九段的话，就要被驱逐出去了，怎么办啊。“想起半个月后的考核，xcharts心中不由得一阵惶恐和难过。

”小朋友，别唉声叹气了“。

好了，金手指出场了，我们去下一章。

（三）XRender

”老师，您真的能让我的canvas之力在半个月后达到九段？“xcharts带着惊喜和疑问的语气看向眼前的老者。

”没错，只要你用心跟着我学习即可！“

”好好好，那我们现在就开始吧！“

”既然你这么着急，那我们现在就开始吧，你是走的可视化图表的路子，你可知道渲染器？“老者淡淡地问道。

“我当然知道了。”这个xcharts还是知道的，“要想将数据变成图表，也就是可视化，除了需要将数据进行处理，变成方便使用的结构，还需要将这些数据渲染到canvas上成为可以看见的信息，这一步因为要考虑到多种环境，所以需要专门的渲染器来完成这份工作。”

“不错，你可修炼出了渲染器？”

“呃”，xcharts闻言有点羞愧，其他人这个年龄都已经初步修炼出了渲染器了，“想好了名字算吗？叫XRender”

“你。。。”，听到这话，饶是老者脾气好，胡须也不禁一阵颤抖，“算了，这无关紧要，xrender是吧？即使它是个空壳，接下来半个月我也能教你如何将它打造成拥有九段canvas之力的渲染器！”

“首先你要知道一个渲染器通常都是采用MVC模式的，也就是由数据驱动视图，至于C，我们先不管。”

接着渲染器通常由这几个部分构成：

好了，今天的canvas破苍穹就到这里。戏说虽好，要真的学习还是要严肃一点。

本系列只是趣味引入，真正的知识点请看正文。