相对于Web坐标系统而言Canvas里的坐标系统较为复杂一些，除了默认的坐标系统之外还有坐标变换概念。在上一节中，已经了解了如何使用scale()、rotate()和translate()方法来变换坐标系。这三个方法提供了一种简便的手段，用于操作绘图环境对象的变换矩阵（Transformation Matrix）。默认情况下，这个变换矩阵就是单位矩阵（Identity Matrix），它并不会影响所要绘制的物体。当调用了scale()、rotate()或translate()方法之后，变换矩阵就会被修改，从而也会影响到所有后续的绘图操作。

在Canvas里的坐标系统一节中，了解到Canvas的坐标系统如下图所示，它以Canvas画布的左上角为原点（也就是(0,0)），x坐标向右方增长，而y坐标则向下方延伸。然而，Canvas的坐标系统并不是一尘不变的。可以对Canvas坐标系统进行移动、旋转和缩放等操作。而这些操作被称为坐标变换。

到目前为止，我们了解了如何在Canvas中绘制线段、矩形、圆或圆弧线和贝塞尔曲线等。这些都是Canvas的CanvasRenderingContext2D对象自身提供绘制基本图形。但是，我们肯定需要在Canvas中绘制除此之外的其他图形，比如前面所说的绘制箭头或者说我们今天要聊的绘制正多边形。

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

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

圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。

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

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

在绘制线段一文中，了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段，但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。Canvas中的线型主要包括线宽、线段端点和线段连接点三个部分。那么咱们先来了解线宽。

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