Canvas 学习笔记---基础图形的绘制

一、Canvas的坐标系
说到坐标系，大家都不陌生，在数学中，我们学习过平面坐标系。在HTML中，也存在着坐标系。Canvas的坐标系和HTML的坐标系是类似的。有一定的相同的地方，也有不同的地方。
相同点：Canvas和HTML的坐标系统原点是都处于左上角，X轴上向右递增正数，向左递减；Y轴上向下递增为正数，向上递减。
不同点：即Canvas允许我们将原点进行平移，也即通过代码我们可以将Canvas的原点修改到任意位置去，可以不为左上角。
大致位置如下图所示：

二、Canvas绘制基础图形
1.绘制矩形
Canvas为我们提供了三种方法来绘制矩形：

 fillRect(x, y, width, height)   绘制一个填充的矩形
 strokeRect(x, y, width, height) 绘制一个矩形的边框
 clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明 

三个方法都接受了4个参数，x，y分别代表了要绘制的矩形左上角的坐标位置，width和height则分别代表了矩形的宽高尺寸。
strokeRect是用砖瓦围了一个围墙，我们能看到的是围墙。
fillRect则不不仅仅是围了一个围墙，连围墙里面用砖瓦铺平了，我们能得到一个的砖瓦
clearRect就有点类似于拆迁大队，把矩形区域内的东西都拆掉。

2.绘制圆
绘制圆只有两个方法：
arc和arcTo，但根据MDN的说明arcTo的实现不靠谱，这里就不做解释了

arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法有五个参数：x，y为绘制圆弧所在圆上的圆心坐标，radius为半径，startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。参数anticlockwise为一个布尔值，为true时，是逆时针方向，否则顺时针方向，默认为false，即顺时针。

3.绘制路径
Canvas绘制路径的原理就是：通过两个点确定一条直线，路径绘制就是通过一组又一组的两点绘制出各种复杂的图形出来。
基本步骤：

• 首先，需要你将画笔移动到某处
• 然后使用画图命名去画出路径
• 之后把路径封闭。
• 一旦路径生成，你就能通过描边或者填充路径来渲染图形

对应的Canvas的API 为以下几个API：

beginPath（）；
moveTo（x，y）；
lineTo（x，y）；
closePath（）；
fill（）；
stroke（）；

创建路径就意味着首先我们要告诉Canvas我们接下来要绘制路径（beginPath）了，然后我们将画笔移动到某处moveTo，这里就是两点中的第一个点，接下来我们要确定第二个点了，即lineTo，假设我们只画一个线段，那么接下来我们就要告诉Canvas要结束绘制路径（closePath）了，当到这一步的时候我们就可以选择这个图形是什么样的了，是要fill（填充）还是要stroke(描边)。