Day4 - 2D渲染环境基础篇 I - 成为Canvas Ninja ～ 理解2D渲染的精髓

进入2D渲染的世界

我们在前面的章节有提到，任何Canvas的相关程序，起手式必定是先取得渲染环境，所以2D渲染程序的第一步当然也就是先取得2D得渲染环境

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

2D渲染环境下的座标系

在国高中上数学课的提到座标系时，我们会很习惯的去画一个X轴向右为正，Y轴向上为正的座标轴，像这样的座标系也就是所谓的『卡氏座标』，他是一种遵循右手定则的坐标系。

我猜大家应该都已经把过去学过的数学/理化都还给老师了，所以这边我们稍微复习一下『右手定则』这个概念：

所谓的『右手定则』指的是：

把右手伸出来，掌心朝自己，四指的方向会跟上图Y轴同向，而大拇指方向则跟X轴同向，同时，你不管怎麽旋转这张图，你都可以用你的右手(手心必须朝自己)四指去比出Ｙ轴方向/用大拇指比出Ｘ轴方向，这就是所谓的『右手定则座标系』

但是在Canvas 2D渲染环境的世界中，它所采取的座标系并不是『右手定则座标系』，而是『左手定则座标系』。

『左手定则座标系』其实就是『右手定则座标系』的镜像版～也就是说，我们其实可以直接把上面这张图水平翻转，它就直接成为了『左手定则座标系』，这时候你会发现，像刚刚同样的操作，会变成只有左手才做得到。

接着是重点，『左手定则座标系』和 『右手定则座标系』虽然看上去好像很相像，但最重要的差别就在於：

右手定则的座标系，逆时针是正的旋转方向，但是左手定则的座标系，顺时针才是正的旋转方向

这点必须要熟记。

2D渲染环境下常见的API与Property

实际上，比起我们之後会提到的webgl环境，2D渲染环境的API在使用上都相当的直观而且单纯（当然，这也同时意味着2D渲染的难点不在於对API的理解，而是在於运算的过程）

随然说2D渲染环境的api数量繁多，但是为了避免一条一条介绍有点流水帐，

在这边我把常见的API/Property划分成三种类型：

• 路径/上色相关
• 变形相关
• 像素操作相关

在接下来的章节中我会根据上述的三种类型，一一介绍三种类型中常用的api和这些api相关的基础常识