上一节我们做好了使用Canvas的准备工作，但并没有深入的介绍如何使用Canvas，比如怎么绘制图形，怎么做Canvas动画等。但并不用着急，随着我们后面的深入学习，这一切都会知道的。在深入学习之前，我们有必要先了解Canvas里的坐标系统。那么这一节，就先来了解Canvas的坐标系统。

上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。因为JavaScript是一门万能的语言，那么接下来的内容，就来看看如何在Canvas中绘制虚线和圆点线。

本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canvas中CanvasRenderingContext2D中与状态操作有关的两个方法。并没有详细的介绍，对于初学者的我而言，也是一知半解。下面的内容记录了我对save()和restore()两个方法的一些理解。

通过前面教程的学习，我们可以在Canvas中轻易绘制路径（线段）。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘制矩形。

在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法，言外之意，在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。

在绘制圆和圆弧一节中，了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线，但很多时候，仅这两个方法还不能满足我们实际的需求，特别是绘制复杂的曲线。不过值得庆幸的是，在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线，在Canvas中提供了两个独立的方法：quadraticCurveTo()和bezierCurveTo()方法。这两个方法就是贝塞尔曲线。