Day3 - Canvas基础概论 II - 成为Canvas Ninja ～ 理解2D渲染的精髓！

Some Deeper Basics

图像的概念

我们在前面有说到，canvas本身是透过物件模型来绘制图像，但是我们没有提到何谓"图像"。

实际上图像的概念很简单。

大家都知道，光的三原色分别是红/蓝/绿; 一束标准的白光，可以分裂成红/蓝/绿光来看。

而图像的实作原理，其实就是透过阻挡掉红/蓝/绿光一部分的占比，来形成不同的颜色。

这边我找了两张图片，这两张图片很好的说明了在计算机领域中图像的概念(图片来源：https://dev.to/)

一个图像，其实可以直接被视为一大群像素的集合体，而每一个像素都具备了能分别对应三种光线(RGB)，还有透明值(alpha)的筛子,这些筛子就是所谓的通道(Channel)

透明值的通道，光看字面上可能不太好理解他在数理上的意义，所以这边我也找到了一个网页，这个网页上的范例可以为我们做一个适当的解释。

https://borderleft.com/toolbox/rgba/

这是一个能够显示rgba颜色跟不同颜色底混合之後的样子的网站，这边我把底色设定为白色，也就是说合成出来的颜色就是该rgba色放置於白背景时候的样子。

图片中我们看到，当alpha设置为0.7时, R和G通道的0(也就是完全阻绝RG光线)，他们的阻挡量(也就是255 - 0 = 255)都分别被乘以0.3而得到77这个数值，而B光线因为阻挡量是0, 所以最後在B数值上还是得到255，最终则呈现出(77,77,255)这个颜色。

从这边我们就可以推论，alpha的数理意义其实就是同步的对三个通道的数值做比例性的消减。

从像素观点来看Canvas

一张Canvas，其实也就是一个图像，他也是由非常多个像素所组成，而每一个像素点上又各自都有rgba四个通道。

一张宽度100px, 高度100px的canvas，它实际上就是100*100 = 10000个像素的集合体，而同时在程序上我们则可以把它转换成一个长度为100*100*4的阵列(也就是一共40000个channel值)

而所谓的『像素操作』，其实就是一种阵列运算，我们可以透过去叠加/转换/削除阵列中的一部分channel值，来达到产生新图像的效果。

Photoshop的滤镜运算(例如彩色转灰阶)，或是在社群软件上有时候可以看到的图片转符号(拼字图画)，就是典型的像素操作技术之运用。

另外，关於Canvas的宽高数值定义其实有一个有趣的点。

实际上在定义一张canvas的大小时，并不是使用css来赋值，而是使用width和height这两个attribute，直接下在canvas元素上面。

只有width和height这两个attribute数值才能够直接定义canvas的像素总量，而如果这时硬是要用css去扩大一张100＊100的canvas为10000px*10000px，就会出现像素密度过低(也就是图像模糊的情形)的状况

关於Canvas的像素操作技术，我们在之後的章节会提到更多实操的范例。

Context? What The Hell Is That?

SO, 你在前面的介绍文一直提到『渲染环境』这一个词汇，那个到底指的是什麽？

初来乍到的同学对於『渲染环境』这一个词可能相当的陌生。
但是如果过去曾经有电脑绘图/3D建模相关知识的人可能就能快速的领会这个词所代表的意义。

『渲染环境』其实指的是透过canvasElement.getContext(type)这一个api所取得的一个物件。
我们其实可以把『渲染环境』想像成是绘图软件(例如小画家)的概念，环境中会具备大量的工具（就像小画家会提供画圆形画方形的功能），让使用者可以应用在绘图程序中。

『渲染环境』实际的提取方式如下：

let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d'); //这个ctx就是2d模式的渲染环境

getContext(type) 这一个方法可以根据输入的type字串来取得操作者所想要使用的渲染环境，而在目前html5的规制下，一共有四种渲染环境可供选择，分别是:

• 2d : 最基础同时也最适合新手入门的渲染环境，具备多种2d绘图的api
• webgl : 是一种速度更快，功能更多，具备原生 3D API，可让使用者能够完全访问渲染管道的渲染环境。(很多人可能会误会3D图像只能透过webgl渲染环境所提供的api来达成，但实际上不是的，这点後面的章节会讲。)
• webgl2 : 简而言之就是webgl环境的上位版，具备更多的功能，但是相对的，对部分旧型浏览器/移动装置浏览器的支援度也略低，算是实验性的功能
• bitmaprenderer : 这也同样是一种只有少数浏览器有支援的实验性功能，它的用途很单纯，是用来转移指定图像的bitmap到指定的canvas上

Start From 2D

虽然说讲到网页前端的Canvas技术，大多数人都会直接地想到像是Three.js/Webgl那样的渲染环境/套件做出来的各种绚丽特效。
但是我个人认为，初学Canvas应该还是先从2D的基础学起，虽然说到了webgl渲染环境时，webgl环境整体提供的API和2D环境所提供的API在本质上有很巨大的差异，但是实际上在做渲染运算、模型规划时的重点还是有其相似之处。

在接下来的章节中，我们会先从2D的基础讲起，然後再开始慢慢地演进到一些更加复杂的案例～