前言
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
当我们苦于用原生前端实现动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面的操作时，Canvas API 提供了一个通过JavaScript 方法和 HTML 的<canvas>元素的方式来实现这些操作。
跟他具有相似功能的还有SVG，这两种绘图手段同样强大，而且可以相互模拟。但从表面上来看，这两种手段迥然不同，又有各自的优缺点。而Canvas API与SVG的主要区别在于使用SVG创建图形则需要构建XML元素树，而使用canvas画图要调用Javascript方法，且相对比较简洁，因此我会更想了解Canvas画图。
基础知识
HTML方面
<canvas id="square" width="300" height="300"></canvas>
<canvas id="circle" width="300" height="300"></canvas>
- 以
<canvas>元素作为一个画布，初始的长宽默认为150px和300px
-
该元素可以像任何一个普通的图像一样有自己的
margin、border…但是这些样式不会影响在<canvas>中的实际图像 -
不支持
<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas，比如：<canvas id="triangle" width="150" height="150"> 浏览器不支持canvas时就会出现我这句话~~~ </canvas> -
必须具有结束标签
</canvas>
Javascript方面
var canvas = document.getElementById('square');//取得第一个画布元素
var ctx = canvas.getContext('2d');//取得它的渲染上下文
canvas起初是空白的- 为了进一步画图，需要找到渲染上下文，用到
getContext方法
ctx.beginPath();//开始一个新路径
ctx.fillStyle = "#ba5b49";//修改覆盖颜色，我选择赤缇色
ctx.moveTo(100,100);//在这子路径开始移动，起点是(100,100)
ctx.lineTo(200,200);//连接(100,100)和(200,200)
ctx.lineTo(200,100);//连接(200,200)和(200,100)
ctx.fill();//填充区域
ctx.stroke();//描画边
在解释上面一长串代码之前我从MDN上搬来了一张栅格图，这也是canvas画布的内核：
一个以左上角为坐标原点(0,0)的画布，x轴正半轴为(0,0)水平向右，y轴正半轴为(0,0)竖直向下。理解这个地方后可以理解刚才的代码
-
beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
-
linkTo()连接两个点，之间生成路径
-
closePath()闭合路径之后图形绘制命令又重新指向到上下文中
-
stroke()通过路径形成线条来绘制图形轮廓
-
fill()通过填充路径的内容区域生成实心的图形
通过绘画，我们获得了一个“三角形”，但其实我们并没有连上初末位置，但是fill()方法在填充开放路径时，就好像有一条直线连接了子路径的终点与起点一样。而且，细看会发现只画了三角形的两条边。
其实仅仅通过上面的这些方法就能绘画出一个三角形，那么其他多边形不也轻而易举，为此我结合数学知识设计了一个简单的多边形自动绘画。大家可以在码上掘金尝试着玩一玩
参考文献
MDN中文文档：developer.mozilla.org/zh-CN/
