关于图形的理解

一条或者多条路径相交产生闭环时就会形成一个图形。所以，图形的基础元素是路径，而在 canvas 中画出图形就是将路径闭合，然后通过描边或填充路径区域来渲染图形。

闭合路径

闭合方法：

// 创建从当前点到开始点的路径
context.closePath();

闭合路径就是创建当前路径中的结束点与开始点的路径。使用路径中的一个例子来做闭合测试...

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(50,20);
ctx.arcTo(150,20,150,70,50);
ctx.lineTo(150,150);

// 手动闭合 or
ctx.lineTo(20,20); 
// 自动闭合
ctx.closePath();

ctx.stroke();

由此可见，我们可以通过闭合路径绘制一些基本图形！

绘制长方形

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.closePath();
ctx.stroke();

绘制三角形

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(30,100);
ctx.lineTo(170,100);
ctx.closePath();
ctx.stroke();

绘制圆形

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();

填充路径

填充方法：

// 填充当前绘图（路径）。默认颜色是黑色。
context.fill();

如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(30,100);
ctx.lineTo(170,100);
ctx.fill();