文章

> 近来要开发一个手写板程序，顺便来系统回顾一下 Canvas 这个东东……

🔔 本篇摘录自 《学习 HTML5 Canvas 这一篇文章就够了》 ，写的真不错。

<canvas> 是 HTML5 新增的一个可以使用脚本（通常为 JavaScript）在其中绘制图像的 HTML 元素。

> 上图就是使用 canvas 绘制出来的

Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。

📔 官方文档

具体安装及引入细节，请直接参考官方文档。

React 是一个用于构建用户界面的 JavaScript 库，你可以用它给简单的 HTML 页面增加一点交互，也可以开始一个完全由 React 驱动的复杂应用。

> 对的，它只是一个 UI 库而已 ！！！

好吧，内容不少，为了后续插入图片之后 ，页面太大，我们这里拆分到两个页面中。

后续章节为概念性章节，统一汇总在该章节内。

i.e. Data Structures

上集讲了一些经典算法，比如给数组排序，找图的最短路径，而上集没讲的是 算法处理的数据 存在内存里的格式是什么。

你肯定不想数据像 John Green 的大学宿舍一样乱 ，到处都是食物，衣服和纸，我们希望数据是结构化的，方便读取，因此计算机科学家发明了 “数据结构”！

i.e. Intro to Algorithms

前两集，我们"初尝"了高级编程语言（比如 Python 和 Java），我们讨论了几种语句 - 赋值语句，if 语句，循环语句，以及把代码打包成 “函数”，比如算指数。重要的是，之前写的指数函数只是无数解决方案的一种，还有其它方案 - 用不同顺序写不同语句，也能得到一样结果。

不同的是"算法"，意思是：解决问题的具体步骤，即使结果一致，有些算法会更好。 一般来说，所需步骤越少越好，不过有时我们也会关心其他因素，比如占多少内存。

“算法” 一词来自 波斯博识者 阿尔·花拉子密， 1000 多年前的代数之父之一 ，如何想出高效算法 - 是早在计算机出现前就有的问题，诞生了专门研究计算的领域，然后发展成一门现代学科。

你猜对了！计算机科学！

i.e. Programming Basics - Statements & Functions

上集讲到用机器码写程序，还要处理那么多底层细节，对写大型程序是个巨大障碍。为了脱离底层细节，开发了编程语言，让程序员专心解决问题，不用管硬件细节。

= 底层各类太多了，编写麻烦，调试麻烦，改动麻烦……*

i.e. The First Programming Languages

之前我们把重点放在硬件 - 组成计算机的物理组件，比如电，电路，寄存器，RAM，ALU，CPU ，但在硬件层面编程非常麻烦。

所以程序员想要一种更通用的方法编程 - 一种"更软的"媒介。

没错，我们要讲软件！

i.e. Early Programming

前几集我们把重点放在计算机的原理，怎么从内存读写数据，执行操作，比如把两个数字加在一起，还简单讲了下指令的执行，也就是计算机程序。

但我们还没讲的是：程序如何"进入"计算机。你应该记得在第 7, 8 集，我们一步步讲了例子程序，当时为了简单，我们假设程序已经魔法般在内存里了，但事实是，程序需要加载进内存，这不是魔法，是计算机科学！

i.e. Advanced CPU Designs

随着本系列进展，我们知道计算机进步巨大，从 1 秒 1 次运算，到现在有千赫甚至兆赫的 CPU ，你现在看视频的设备八成也有 GHz 速度 ，1 秒十亿条指令 ，这是很大的计算量！

早期计算机的提速方式是减少晶体管的切换时间 ，晶体管组成了逻辑门，ALU 以及前几集的其他组件，但这种提速方法最终会碰到瓶颈，所以处理器厂商发明各种新技术来提升性能，不但让简单指令运行更快，也让它能进行更复杂的运算。