Canvas 学习笔记（二）——基础图形的绘制

距离上一篇已通过去好长段日子了，原本这篇早就该写了，天不遂人愿：笔记本的键盘坏掉了，而后送修了耽误了好几天。

上一篇简单记录了一些Canvas 的基础知识，这一篇迟到的笔记来简单记录一下Canvas 绘制基本图形。

说到基本图形，无非是矩形、圆形、线段、曲线。不少所谓的图案基本都是这几种基本图形组合而成。好比五星 ★ 其实就是几条线段分够填充而组成的图案；圆弧是不闭合的圆形组成的；折线是多条线段链接而成的。

在开始介绍绘制基本图形以前，有必要简单介绍一下Canvas 的坐标系统。坐标系你们都不陌生，中学时候平面坐标系都有学习过，X轴、Y轴。在HTML开发中，也存在着平面坐标系。 Canvas的坐标系统和HTML的坐标系是相似的。有必定的相同的地方，也有不一样的地方。

Canvas和HTML的坐标系统原点都处于左上角，X轴上向右递增正数，向左递减；Y轴上向下递增为正数，向上递减。可是Canvas和html有一个不一样的地方：即Canvas容许咱们将原点进行平移，也即经过代码咱们能够将Canvas的原点修改到任意位置去，能够不为左上角。 后边的笔记中我会讲讲怎么修改Canvas的坐标系。

关于坐标系统能够看看下面这张我从MDN偷来的图。

1. 绘制矩形

   Canvas为咱们提供了三种方法来绘制矩形：

   fillRect(x, y, width, height)   绘制一个填充的矩形
    strokeRect(x, y, width, height) 绘制一个矩形的边框
    clearRect(x, y, width, height) 清除指定矩形区域，让清除部分彻底透明

   三个方法都接收4个参数，x、y分别表明了要绘制的矩形左上角的坐标位置，width和height 则分别表明了矩形的宽高尺寸。三个方法虽然都是绘制矩形的，但也有不一样的地方：strokeRect是用砖瓦围了一个围墙，咱们能看到的是围墙；而fillRect则不只围了一个围墙，连围墙里面用砖瓦铺平了，咱们能到一片的砖瓦；clearRect就有点相似于拆迁大队 拆拆拆，把矩形区域内的东西都拆掉。

   http://codepen.io/YoRolling/p...

2. 绘制圆

   相对于绘制矩形，绘制圆（圆弧）就简单的多了。只有两个方法 arc 和 arcTo，但根据MDN的说明arcTo的实现不靠谱，咱们这里就不对它多作解释。咱们来看一下arcTo。

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

   该方法有五个参数：x,y 为绘制圆弧所在圆上的圆心坐标;radius为半径;startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。参数anticlockwise 为一个布尔值，为true时，是逆时针方向，不然顺时针方向,默认为false,即顺时针。

   来颗板栗吧：

   http://codepen.io/YoRolling/p...

3. 绘制路径

   Canvas 绘制中最麻烦也是功能最强大的部分就是路径绘制了。 咱们都知道两点肯定一条直线（线段），路径绘制中运用的就是这个定理。经过一组又一组的两点绘制出各类复杂的图形出来。

   经过路径绘制一个图形基本分为一下几步：

   • 首先，须要将画笔移动到某处。

   • 而后你使用画图命令去画出路径。

   • 以后把路径封闭。

   • 一旦路径生成，你就能经过描边或填充路径区域来渲染图形。
     对应到Canvas的API为如下几个API

   beginPath();
   moveTo(x,y);
   lineTo(x,y);
   closePath();
   fill();
   stroke();

   建立路径意味着首先咱们要告诉Canvas咱们接下来要绘制路径(beginPath)了，而后咱们将画笔移动到某处moveTo，这里就是两点中的第一个点，接下来咱们要肯定第二个点了，即lineTo，假设咱们只画一个线段，那么接下来咱们就要告诉Canvas要结束绘制路径了(closePath);当到这一步的时候咱们就能够选择这个图形是什么样的了，是要fill仍是stroke。

   到这里，你可能会以为绘制路径好麻烦啊，若是每次绘制路径都要通过这么多步骤的话，那要多麻烦啊。幸运的是，某些状况下Canvas可以为咱们自动推测完善一些步骤。

   • 当前路径为空，即调用beginPath()以后，或者canvas刚建的时候，第一条路径构造命令一般被视为是moveTo() ，不管最后的是什么。出于这个缘由，你几乎老是要在设置路径以后专门指定你的起始位置。

   • 就是闭合路径closePath(),不是必需的。这个方法会经过绘制一条从当前点到开始点的直线来闭合图形。若是图形是已经闭合了的，即当前点为开始点，该函数什么也不作。

   • 当你调用fill()函数时，全部没有闭合的形状都会自动闭合，因此你不须要调用closePath()函数。可是调用stroke()时不会自动闭合。

   其实，在以上几种以外还有一个更为有用的东西贝塞尔曲线，Canvas提供了一次贝塞尔曲线 和 二次贝塞尔曲线 。 这里暂时先很少作介绍，实际上是由于我对贝塞尔不熟悉。在稍后回来补充这一点。

Canvas的基本操做方法基本介绍完了，经过合适的组合利用这些API 以及你的创意相信能够建立出很是出彩的效果。