HTML5的canvas元素使用JavaScript在网页上绘制图像， canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法。
/* 获取canvas元素 */
let canvasDOM = document.getElementById('canvasId');
/* 创建canvas对象 */
let cavs = canvasDOM.getContext('2d');
/* 绘制一条直线 */
/* 设置开始点 */
/* 距离左边100，距离顶部100 的起始点 */
cavs.moveTo(100, 100);
/* 距离左边300，距离顶部100的终点 */
cavs.lineTo(300, 100);
/* 起始点 */
cavs.moveTo(70,200)
/* 终点 */
cavs.lineTo(330,200)
/* 起始点 */
cavs.moveTo(200,50)
/* 终点 */
cavs.lineTo(200,350)
/* 起始点 */
cavs.moveTo(130,50)
/* 终点 */
cavs.lineTo(80,140)
//设置线条的颜色值
cavs.strokeStyle = '#1ECA5F';
//设置线条的粗细
cavs.lineWidth = "10"
/* 把起始点和终点连起来 */
/* ★ stroke就是用来绘制线的或者是三角形和矩形的边框*/
cavs.stroke();
★如果需要闭合路径，开始新的起点路径时，都需要创建和关闭路径，开始创建路径： cav.beginPath(); 关闭路径： cav.closePath();
/* cav.fillRect(x,y,width,height) //填充矩形 */
/* 距离左边100，距离顶部100，宽300，高200 */
/* 🔺 先设置颜色再填充 */
/* 设置填充颜色 不然默认为黑色 */
cav.fillStyle = '#EF9142'
/* 这里的实际大小不要使用像素来计算 */
cav.fillRect(100,100,300,200);
/* cav.strokeRect(x,y,width,height) //绘制矩形边框 */
/* 距离左边100，距离顶部100，宽300，高200 */
/* 先设置颜色和大小 再画矩形 */
cav.strokeStyle = 'red';
cav.lineWidth = 10;
cav.strokeRect(100,100,300,200)
/* cav.clearRect(x,y,width,height) 清除矩形区域 */
cav.clearRect(120,120,100,100)
