一、前言
最近想尝试用代码画图，最开始考虑的是用css，用css画图的本质就是不断地拼接div，熟悉一些基本的css属性根据需求去设置，有一定的耐心就可以实现。网上有很多优秀的例子，如下面教程中的哆啦A梦。
https://blog.csdn.net/qq_29326717/article/details/73690980
但是觉得这样的方式并不灵活，在查阅资料的过程中深入了解了一下canvas绘图，之前只是知道canvas绘图功能，没有深入接触，了解之后，觉得用canvas绘图很方便，可以灵活实现效果。
二、基本用法
用canvas画图，首先要新建一个canvas画布，注意画布的宽高要在<canvas>标签中设置，用css设置会导致图片变形。
绘图前的基本步骤如下，首先获取canvas画布，在确定浏览器支持之后再调用canvas的getContext(‘2d’)方法取得2D上下文对象，就可以开始绘制图形啦。
三、常用方法和属性
下面介绍一些canvas绘图常用的方法和属性。
1、基本绘图操作填充fill和描边stroke
2D上下文有两种基本绘图操作：填充和描边，对应的两个属性是fillStyle和strokeStyle。例如我们取得的2D上下文对象是context，那么我们就可以作如下设置。
2、绘制矩形
矩形是唯一一种可以直接在2D上下文中绘制的形状。
fillRect(x, y, w, h)：绘制填充颜色的矩形，这里的x,y是相对于canvas画布的坐标，画布的左上角坐标是(0, 0)，向右和向下递 增，fillRect()中的参数x,y是矩形的起始坐标，w和h代表绘制矩形的宽度和高度。
strokeRect(x, y, w, h)：绘制描边的矩形。描边的时候可以通过lineWidth属性调节描边线条的宽度。
clearRect(x, y, w, h)：清除画布上的矩形区域。
演示代码：
效果：
3、绘制路径
canvas绘图主要通过绘制路径实现。
moveTo(x, y)：将绘图游标移动到点(x, y)，一般是一个路径的起点位置。
lineTo(x, y)：从上一个点到点(x, y)画一条直线。
arcTo(x1, y1, x2, y2, radius)：从上一个点开始绘制一条弧线，到(x2, y2)，并以给定的半径穿过(x1, y1)。
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x, y)为圆心，r = radius画弧线，startAngle和 endAngle是起始角度和结束角度，用弧度表示，最后一个参数counterclockwise表示是否按逆时针方向画图，true为逆时针方向，false为顺时针方向。默认是false即顺时针方向。
rect(x, y, width, height)：从(x, y)开始绘制一个宽等于width高等于height的矩形，这个矩形是路径，与之前用strokeRect()绘制的独立矩形不一样。
quadraticCurveTo(cx, cy, x ,y)：从上一点开始绘制一条二次贝塞尔曲线，(x, y)是结束点，(cx, cy)是控制点。
bezierCurveTo(c1x, c1y, c2x, c2y,x, y)：从上一点开始绘制一条三次贝塞尔曲线，(x, y)是结束点，(c1x, c1y), (c2x, c2y)是控制点。
fill()：填充路径
stroke()： 路径描边，
注意着两者的使用顺序，以下是对比
先描边再填充的线条只有线条宽度的一半，因为后来填充的原因被覆盖了一半的宽度。
以上这些是最基本的图形路径，要得到复杂图形，就要精细计算和排列。我自己做了一个小demo，链接在文后，想参考的小伙伴可以打开看看。
4、beginPath()和closePath()
beginPath()
绘制一个新路径前必须调用该方法，因为canvas路径是以上一点为起始画的，比如我们画好了一条直线，我们想画第二条平行线，如果没有在再次绘制之前调用beiginPath()的话，就会会出现下面的情况，
我们想要得到的是两条平行线，但是第一条线的末尾却和第二条线相连了，这是因为我们没有重新beginPath，canvas只是在画一条路径，就会出现上图的情况，加上beginPath后就没有问题了。
closePath()
说到beginPath就要提到closePath()，closePath()尝试从画笔结束的点到路径起始点画一条直线。
如果没有调用closePath画出来的线是这样，
加了closePath()之后就是一条闭合路径
四、将canvas画布导出为图片
canvas绘制的图形可以导出为图片，调用canvas的toDataURL()方法，利用a标签实现下载。默认是png格式，也可以自定义成jpeg，但是这个方法是后来才追加的，使用的时候要注意浏览器是否支持。
五、画布变换
除了绘制路径，我们还可以对画布进行调整，有
Translate(), scale(), rotate(), setTransform()和transform()这几种方法，具体可以参考：
https://www.cnblogs.com/fangsmile/p/5647390.html
需要注意的是对画布进行操作时，要使用save()和restore()来保存和恢复状态。如果不用save()函数的话， 下一次变换的参照就不是初始位置，而是上一次变换结束的位置，例如第一次变换了30度，如果不使用save()，那么我们执行第二次变换60度时，出来的效果就是变换了30+60度，使用save()才会得到想要的60度变换。
以上就是我自己总结的一些canvas绘图的知识点，我自己做了一个小demo，你可以在页面上查看效果：
http://feiyu.qywyyztp.top/#/painting
这是我个人网站的一个页面，我的个人网站项目代码托管在github上，欢迎访问：
https://github.com/Lindsayyyy/My-Website