canvas（二）绘制路径-简单技术大用途

回顾

以前已经会绘制、填充矩形了。虽然懵懂，可是api设计仍是很友好的，不死死记住api，摸索一点套路，让学习事半功倍：

fill 填充
stroke 绘制
改变颜色 xxxStyle 属性接收一个字符串参数
虽然不知道对不对，但终归是本身总结的，先这么构建了本身的‘世界观’，之后感受不对在完善本身的抽象‘认知’， 这是个人一种学习方式。

直线绘制路径--三角形

还记得初中数学学到的：点构成线、线构成面、面构成体...，要绘制一个图形咱们能想到的就是一笔笔绘画，而后涂彩。

• 好吧，命令你的浏览器拿起笔，开始画画

  api： beginPath()            // 当canvas建立时 默认调用

• 你须要找一个起点/ 把你的笔在某一点作个点

  lineTo(x,y)        // xy 为坐标

• 继续在别的点作点（任意个）

  lineTo（x1,y1）

• 作点完毕 是否回到原点（闭合）

  closePath()                    -- 要不要闭合 可选

• 点作好了

  如今将点链接起来： stroke（）                        // stroke  调用绘制
     或者在区域内涂色（填充）： fill（）                     //  fill 调用填充

• 若是要修改颜色呢 xxxStyle 设置便可

  fillStyle = 'red'        // 填充颜色    
     strokeStyle    = 'blue'    // 绘制颜色

曲线绘制路径--圆形 arc

arc(x, y, r, beginAngle, endAngle, counterclockwise )    
    //  x坐标，y坐标，半径， 开始点（弧度角）， 结束点， 顺/逆时针（默认false 顺时针）

回想一下初中数学知识点：

一、 圆是以一个点为中心 到这个点为定长的点组成的图形
二、 1弧度等于弧长为r的弧所对应的圆心角
三、 圆的周长的2πr 半径r 因此圆的弧度为2π
... ...

使用这些简单的知识点就能够绘制咱们想要的弧度了；

用上面的知识作点啥？

作点什么？本身实现点吧！