什么是Canvas？
HTML5 <canvas> 元素用于图形的绘制，<canvas> 标签只是图形容器，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
一个画布在网页中是一个默认大小300像素×150像素矩形框。<canvas>标签内的内容只有在浏览器不支持<canvas>时才会显示出来。
1 <canvas id="canvas" width="200" height="100" style="border:1px solid currentColor;">Your browser does not support Canvas, please upgrade your browser</canvas>
1 const canvas = document.getElementById(‘canvas‘)2 const context= canvas.getContext(‘2d‘)
所有的绘图动作都需要依靠context来完成。
绘制直线：
1 context.moveTo(0,0) 2 context.lineTo(100,100) 3 context.stroke()
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke()绘制直线
这样就绘制了一条从(0,0)到(100,100)的直线。
注：Canvas是基于状态的绘图方式，moveTo(x,y)、lineTo(x,y)只是在定义将要绘制的直线的状态，只有调用了stroke()方法后，Canvas才会将之前设置的状态绘制到画布之上。
lineWidth 和 strokeStyle
1 context.moveTo(0,0) 2 context.lineTo(100,100) 3 context.lineWidth = 10 4 context.strokeStyle = ‘#0091db‘ 5 context.stroke()
绘制首尾相连的折线：多次调用lineTo()即可
1 context.moveTo(50,50) 2 context.lineTo(150,50) 3 context.lineTo(150,25) 4 context.lineTo(200,75) 5 context.lineTo(150,125) 6 context.lineTo(150,100) 7 context.lineTo(50,100) 8 context.lineWidth = 10 9 context.strokeStyle = ‘#0091db‘ 10 context.stroke()
绘制首尾不相连且状态一致的折线：多次调用moveTo()即可
1 for (let i = 0; i < 3; i++) { 2 context.moveTo(50 + 50 * i, 50) 3 context.lineTo(100 + 50 * i, 100) 4 context.lineTo(50 + 50 * i, 150) 5 } 6 context.lineWidth = 10 7 context.strokeStyle = ‘#0091db‘ 8 context.stroke()
、
绘制首尾不相连且状态不一致的折线：由于每段线段的状态不一样，所以在绘制之前就需要使用beginPath()来告诉Canvas现在要开始绘制一条新的路径了
1 context.lineWidth = 10 2 for (let i = 0; i < 3; i++) { 3 context.beginPath() 4 context.strokeStyle = `rgb(${100 + i * 30},${100 + i * 60},${100 + i * 90})` 5 context.moveTo(50 + 50 * i, 50) 6 context.lineTo(100 + 50 * i, 100) 7 context.lineTo(50 + 50 * i, 150) 8 context.stroke() 9 }
原文：http://www.cnblogs.com/yin-1841/p/7767742.html