学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。
基础知识
canvas 的基础知识不算多，主要掌握如何绘制线段，图形，图片，文本等。canvas可以在浏览器中绘制，也可以借助 node-canvas在node服务端绘制简单的图片。本文只记录在浏览器中绘制，至于在node端如何绘制，自己可以去查看相关资料。
在浏览器中绘制，就先在html中定义canvas元素，默认宽高是300 * 150，可以通过
width和
height设置。注意canvas元素样式宽高和canvas绘图画布宽高不是一个东西，这块将在以后说的。
<canvas id="canvas">
<p>当前浏览器不支持canvas，请升级浏览器</p>
</canvas>在绘制之前，我们要先获取当前canvas的2d绘制上下文context，后续总是通过操作context来进行绘制。
let canvas = document.querySelector('#canvas');
if (!canvas) {
throw new Error('can not find canvas element');
}
// 注意2d.参数必须是小写的；
// 通过设置参数为webgl，可以获取3d绘制上下文
let ctx = canvas.getContext('2d');注：后续示例中会忽略上面的代码片段，直接使用
ctx 变量表示canvas的2d绘制上下文。再来看看canvas 2d绘制中的坐标系统，当前canvas元素左上角为坐标原点(0,0)，水平向右为X轴正方向，垂直向下为Y轴正方向，如下图。可以通过平移(translate)，旋转(rotate)，缩放(scale)来操作坐标系，实现一些动画，这部分将在动画知识部分详细讲解。
线段
在绘制一条简单的线段时，一般会先设置线段的样式，比如，颜色，线条宽度，线条端点样式等，我们通过设置
strokeStyle来设置
ctx的全局绘制样式，可以是
rgba或合法的16进制颜色值，或者渐变对象等。如下代码简单的绘制了一条从(10,10)到(50,60)的，宽度为10的，红色的线段。
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.moveTo(10, 10);
ctx.lineTo(50, 60);
ctx.stroke();
