带你快速玩转canvas（2）画个矩形，再画个圆

╰半夏微凉° 2022-07-14 09:10 220阅读 0赞

先讲API，再讲如何画，没有耐心的可以直接看3和4，然后在回过头来看API说明  
[DEMO地址][DEMO]

### **1. 绘制矩形** ###

**fillRect(x, y, width, height)**

1. 绘制一个矩形；
    2. 该矩形为填充满的；
    3. x和y指矩形左上角，相对于画布的坐标。
    4. x和y的标准范围是x:0~width, y:0~height
    5. 参数是number类型，不是字符串类型；
    6. 示例：ctx.fillRect(10, 20, 50, 50);
    7. 关于参数的解释，下同；

**strokeRect(x, y, width, height)**

1. 绘制一个矩形；
    2. 该矩形只有边框；
    3. 该矩形内部透明；

**clearRect(x, y, width, height)**

1. 清除一个矩形区域；
    2. 该矩形区域内内容被清除，变为透明；

### **2. 绘制路径** ###

解释：

1. 简单来说，是绘制几条边，然后这几条边围城一个封闭图形，就完成了一个图形；
    2. 绘制过程中，建议不要去做其他事，原因见流程3-5；
    3. 开始绘制：ctx.beginPath();
    4. 绘制中：略，此时只有线条，但是没有图形（轮廓也没有，线条是看不见是，只是为最后一步做准备）；
    5. 结束绘制：ctx.fill()或者ctx.stroke()，前者填充满图形，后者只有线条轮廓；
    6. 因为是一个封闭的过程，所以虽然也可以在绘制过程中去完成其他的绘图（不是所有都可以），但是这样不利于维护，因此还是建议分开写；

API：

**beginPath()**

1. 生成一条路径；
    2. 这条路径是母路径，在绘制过程中，会生成很多条子路径，
    3. 子路径最终构成的就是我们想要的图形
    4. 另外，虽然这个方法可以多次调用（至少在我的浏览器可以），但是建议还是按照上面流程来完成，这样至少代码可维护性好，不易发生BUG；

**closePath()**

1. 闭合路径；
    2. 简单来说，就是从线条绘制到当前位置时的坐标，和起点连线；
    3. 起点是指调用beginPath后，移动到的第一个点；
    4. 这个点可能是moveTo的参数，也可能是lineTo的参数，或者其他。但总之，第一条路径一般视为于moveTo

**stroke()**

1. 描绘轮廓；
    2. 通俗的说，就是你线条怎么画的，他给你把线条染色（没染色前是看不见的）；
    3. 这个只染轮廓不填充；

**fill()**

1. 填充线条；
    2. 这个填满被线条包围的区域；
    3. 重点是包围的区域，比如你画个五角星（线条穿来穿去），那么五角星内部的五边形和五个三角形会被填充，外部不会；
    4. 在调用beginPath()之前，染色视为最后一次的fillStyle的颜色；

**moveTo(x, y)**

1. 移动画笔；
    2. 移动过程中不会产生线条；
    3. 可以把这个理解为把笔抬起来，然后移动到新地方后再把笔放下来；

**lineTo(x, y)**

1. 画一条直线；
    2. 起始位置是当前笔的位置；
    3. 参数是笔移动后的终点位置（相对于画布的坐标）；
    4. 终点位置是下一次画图时，笔的起始位置；

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

1. 画一个圆弧；
    2. x和y是圆心相对于画布的坐标；
    3. radius是圆的半径；
    4. startAngle和endAngle是起始角度和终止角度，单位是弧度，2 * Math.PI是360度；
    5. anticlockwise表示顺逆时针，false为顺时针，true为逆时针；
    6. 起始坐标是圆的正右方位置

### **3. 画矩形** ###

0.颜色

使用stroke()（轮廓颜色）或者fill()（填充颜色）完毕后，再更换颜色开始下一次绘图

1.画未填充的矩形

1. 画未填充的矩形还是很简单的；
    2. 首先确定矩形左上角顶点的位置；
    3. 再确定矩形的宽高；
    4. 使用strokeRect(x, y, width, height)，将数据输入即可；

2.画填满的矩形

1. 画未填充的矩形还是很简单的；
    2. 首先确定矩形左上角顶点的位置；
    3. 再确定矩形的宽高；
    4. 使用fillRect(x, y, width, height)，将数据输入即可；（和上面的区别在这一步）

3.画内有空隙的矩形

1. 典型来说，比如外边有个大矩形，内部有个小矩形，两个矩形之间被染色，而内部小矩形是透明的；
    2. 先按照2的方式画个矩形；
    3. 然后使用clearRect(x, y, width, height)清空小矩形区域的图形即可；

### **4. 画圆形** ###

0.颜色

使用stroke()（轮廓颜色）或者fill()（填充颜色）完毕后，再更换颜色开始下一次绘图

1.画圆形

0. 调用ctx.beginPath()开始画路径;
    1. 确定圆心坐标和圆半径
    2. 调用ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)方法
    3. x和y填圆心坐标，radius填半径；
    4. startAngle填开始角度，endAngle填结束角度，注意，角度为0时，起始点为圆心正右方；
    5. 角度为弧度，弧度和角度的换算是360角度 = 2π弧度；
    6. 最后一个参数不填或者为false时，表示默认顺时针绘图，否则为逆时针绘图；
    7. 可能会产生一个bug，原因和解决方式见下面画两个圆

2.画两个圆形

1. 大部分和1相同；
    2. 正常流程是通过beginPath()——》画一个圆——》fill()或者stroke()，重复这个流程画下一个圆；
    3. 如果不是这样的流程的话，那么需要看第四条
    4. 需要使用moveTo来将画笔从第一个圆的终止处，移动到第二个圆画图时的起始处（你要画图的圆弧的起始处），然后再开始画下个圆；
    5. 圆形就调用fill()，圆弧就调用stroke()
    6. 如果非满圆的话，注意结果不是扇形，是一个圆被一刀切掉一部分后的样子（具体自己画一下就理解了，或者看DEMO）；

3.画圆弧

1. 大部分和1相同；
    2. 需要注意的是笔记的轨迹；
    3. 在beginPath()后可以直接开始画圆弧，因为自带moveTo效果；
    4. 画完后直接调用stroke()方法来收尾给线条染色；
    5. 连续画圆弧的话，建议走beginPath()——》画一个——》stroke()，然后下一轮的方式，比较稳妥；

4.画扇形

1. 大部分和画圆相同；
    2. 需要先手动移动画笔到圆心，再调用arc方法来画图，不然画出来的就不是一个扇形；
    3. 参照DEMO里第二个图和第三个图的区别，就是圆和扇形的区别了；

[DEMO]: https://github.com/qq20004604/some_demo/blob/master/canvas/canvas%E7%A4%BA%E4%BE%8B.html