从基础研究canvas，我们从简单的线段开始，一步一步绘制复杂图形
html code
<style type="text/css">
#can1{background-color: cadetblue;}
</style>
<div class="justify-content-sm-center text-center">
<canvas id="can1" width="800" height="800"></canvas>
</div>
在html里，我们定义了一个画布，为了更加直观的看出画布的范围，添加了背景颜色.
然后我们开始渲染上下文
var can1 = document.getElementById('can1');
//渲染画布的上下文the rendering context
var ctx = can1.getContext('2d');
<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。
先画个矩形
ctx.fillStyle = "#058";//设置颜色
//绘制一个填充的矩形 .fillRect(x,y,width,height);
ctx.fillRect(10,10,60,50);
矩形使用.fillRect(x,y,width,height);绘制
再画个半透明矩形，并让他们的一部分重叠在一起。
ctx.fillStyle = "rgba(186, 41, 80, 0.73)";//设置半透明颜色
ctx.fillRect(50,10,50,80);//绘制一个填充的矩形
效果如图所示:
相交的矩形
通过上面的热身，你已经了解了canvas绘图，下面我们从线段开始
绘制一段折线
ctx.beginPath();
ctx.moveTo(180,10);
ctx.lineTo(230,30);
ctx.lineTo(180,50);
ctx.lineWidth=5;
ctx.strokeStyle = '#058';
ctx.stroke();
上面的代码，我们用到了以下几个函数和方法：
lineTo()方法
添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
beginPath()
新建一条路径，图形绘制命令被指向到路径上生成路径。
fillRect()
该方法绘制“已填色”的矩形。默认的填充颜色是黑色。
stroke()
通过线条来绘制图形轮廓。
绘制一个封闭的图形——三角形
在上面的代码的基础上，我们只需要再加个函数ctx.closePath();就能够封闭这个折线，
我们一般把代码分成三部分来写，这样的代码比较清晰易懂。
//1、开始定义路径
ctx.beginPath();
ctx.moveTo(150,10);
ctx.lineTo(200,30);
ctx.lineTo(150,50);
ctx.closePath();
//2、开始设置状态
ctx.lineWidth=8;
ctx.fillStyle = '#indianred';
ctx.strokeStyle = '#fbbe0d';
//3、开始绘制
ctx.fill();
ctx.stroke();
因为canvas是基于状态绘制的，也就是说，把canvas的各种设置、定义和最后的绘制，分开来写。
以上代码，我们又使用了一个函数：
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
最终效果：
折线和三角形
这样一行一行写，不能方便的在别处复用，我们还是把它封装成函数，使用时，只需调用即可
//绘制三角形的函数
//定义了绘制起点的x轴坐标,y轴坐标,图形宽度w,图形高度h,边框粗细bW,边框颜色bC,填充颜色fC
function drawTriangle(x, y, w, h, bW, bC, fC){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x + w,y+h/2);
ctx.lineTo(x, y + h);
ctx.closePath();
ctx.lineWidth = bW;
ctx.fillStyle = fC;
ctx.strokeStyle = bC;
ctx.fill();
ctx.stroke();
}
drawTriangle(30,180,100,90,8,'#8ab62f','#fba670');
用函数封装的三角形
