想看前面整理的canvas常用API的同学可以点下面：
从本篇文章开始，我会分享给大家canvas绘制的各种基础图形和酷炫的图形，注意：是一系列！欢迎关注！
后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路。
本文看点：使用canvas来绘制常见的各种图形实例，并且会简单封装一下绘制各图形的方法，最后会分享给大家一个封装好的快速绘制多边形的方法。
开始之前
绘制圆形
参数解释
：x,y-圆心；start-起始角度；end-结束角度；color-绘制颜色；type-绘制类型（'fill'和'stroke'）。实例如下图所示：
绘制三角形
参数解释
：x1(2、3),y1(2、3)-三角形的三个点的坐标；color-绘制颜色；type-绘制类型（'fill'和'stroke'）。实例如下图所示：
绘制（圆角）矩形
参数解释
：x,y-左上角点的坐标；width、height-宽高；radius-圆角；color-绘制颜色；type-绘制类型（'fill'和'stroke'）。实例如下图所示：
绘制多边形
参数说明：
ctx: canvas画布
conf: 配置项，提供以下一些配置
- x： 中心点横坐标
- y： 中心点纵坐标
- num: 多边形的边数
- r：多边形的半径长度
- width：多边形线的宽度
- strokeStyle：边线的颜色
- fillStyle：填充的颜色
上图效果的代码如下：
上图1的代码：
上图2的代码：
上图3的代码：
结语
我们总结一下，使用canvas绘制图形就是那几个函数：beginPath、arc、moveTo、lineTo、closePath、fill、stroke。当我们能够熟练掌握并运用自如的时候，就能够独当一面了。加油吧，骚年们！
本文涉及的代码我已经上传至github，，喜欢的同学点个Star，多谢多谢～
原文链接：https://www.f2er.com/js/43025.html